<!-- eslint-disable prettier/prettier -->
<!-- eslint-disable vue/no-parsing-error -->
<!-- eslint-disable vue/valid-v-slot -->
<template>
  <div class="main-container">
    <TableBody>
      <template #header>
        <TableHeader ref="tableHeaderRef" :show-filter="false">
          <template #search-content>
            <a-form ref="seachForm" :model="form">
              <a-row :gutter="24">
                <a-col :span="4">
                  <a-form-item field="id" hide-label>
                    <a-input-group style="width: 100%">
                      <a-select style="width: 50%" @change="typeFn" v-model="type" placeholder="first">
                        <a-option v-for="item in typeLists" :key="item.name" :value="item.value">{{
                          item.name
                        }}</a-option>
                      </a-select>
                      <a-input style="width: 50%" v-model="typeText" allow-clear placeholder="请输入搜索条件"><template
                          #suffix>
                          <!-- <icon-plus @click="open" style="cursor: pointer" />  -->
                        </template></a-input>
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="type" hide-label>
                    <a-select class="width100" v-model="form.type" placeholder="请选择商品类型" allow-clear>
                      <a-option :value="0">物联卡</a-option>
                      <a-option :value="1">号卡</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="operatorIds" hide-label>
                    <a-select class="width100" v-model="form.operatorIds" multiple :max-tag-count="1"
                      placeholder="请选择运营商" allow-clear>
                      <a-option :value="0">中国移动</a-option>
                      <a-option :value="1">中国联通</a-option>
                      <a-option :value="2">中国电信</a-option>
                      <a-option :value="3">中国广电</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="classIds" hide-label>
                    <a-select class="width100" v-model="form.classIds" multiple :max-tag-count="1" placeholder="请选择商品分类"
                      allow-clear>
                      <a-option v-for="item in classList" :key="item.id" :value="item.id">{{ item.name }}</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="channelIds" hide-label>
                    <a-select class="width100" v-model="form.channelIds" multiple :max-tag-count="1"
                      placeholder="请选择商品渠道" allow-clear>
                      <a-option v-for="item in channelList" :key="item.id" :value="item.id">{{ item.name }}</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="mainPush" hide-label>
                    <a-select class="width100" v-model="form.mainPush" placeholder="请选择主推状态" allow-clear>
                      <a-option :value="1">开启</a-option>
                      <a-option :value="0">关闭</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="belongingPlaces" hide-label>
                    <a-select class="width100" v-model="form.belongingPlaces" multiple :max-tag-count="1"
                      placeholder="请选择归属地" allow-clear>
                      <a-option :value="0">随机归属地</a-option>
                      <a-option :value="1">固定归属地</a-option>
                      <a-option :value="2">收货归属地</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="selectNumberTypes" hide-label>
                    <a-select class="width100" v-model="form.selectNumberTypes" multiple :max-tag-count="1"
                      placeholder="请选择选号方式" allow-clear>
                      <a-option :value="0">随机选号</a-option>
                      <a-option :value="1">激活选号</a-option>
                      <a-option :value="2">在线选号</a-option>
                      <a-option :value="3">号池选号</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="idCardImg" hide-label>
                    <a-select class="width100" v-model="form.idCardImg" placeholder="请选择是否上传证件照" allow-clear>
                      <a-option :value="true">是</a-option>
                      <a-option :value="false">否</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="commissionRules" hide-label>
                    <a-select class="width100" v-model="form.commissionRules" multiple :max-tag-count="1"
                      placeholder="请选择佣金规则" allow-clear>
                      <a-option :value="0">秒返</a-option>
                      <a-option :value="1">次月底返</a-option>
                      <a-option :value="2">月月返</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="settlementType" hide-label>
                    <a-select class="width100" v-model="form.settlementType" placeholder="请选择结算方式" allow-clear>
                      <a-option :value="0">手动结算</a-option>
                      <a-option :value="1">自动结算</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="discountTimeType" hide-label>
                    <a-select class="width100" v-model="form.discountTimeType" placeholder="请选择优惠时长类型" allow-clear>
                      <a-option :value="0">固定优惠</a-option>
                      <a-option :value="1">到期可续</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="stockType" hide-label>
                    <a-select class="width100" v-model="form.stockType" placeholder="请选择是否计算库存" allow-clear>
                      <a-option :value="0">计算库存</a-option>
                      <a-option :value="1">不计算库存</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="state" hide-label>
                    <a-select class="width100" v-model="form.state" placeholder="请选择商品状态" allow-clear>
                      <a-option :value="true">上架</a-option>
                      <a-option :value="false">下架</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addTime" hide-label>
                    <a-date-picker class="width100" v-model="form.addTime" show-time :disabledDate="changeTraceEnd"
                      placeholder="请选择开始创建时间" :time-picker-props="{ defaultValue: '12:00:00' }" :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]" format="YYYY-MM-DD HH:mm:ss" />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endTime" hide-label>
                    <a-date-picker class="width100" v-model="form.endTime" show-time :disabledDate="changeTraceStart"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]" placeholder="请选择结束创建时间" :time-picker-props="{ defaultValue: '12:00:00' }" />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addBalance" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input v-model="form.addPrice" placeholder="开始售价" allow-clear />
                      <a-input v-model="form.endPrice" placeholder="结束售价" allow-clear />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addCost" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input v-model="form.addCost" placeholder="开始成本" allow-clear />
                      <a-input v-model="form.endCost" placeholder="结束成本" allow-clear />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addSetMealPrice" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input v-model="form.addSetMealPrice" placeholder="开始套餐售价" allow-clear />
                      <a-input v-model="form.endSetMealPrice" placeholder="结束套餐售价" allow-clear />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addSetMealGeneralFlow" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input v-model="form.addSetMealGeneralFlow" placeholder="开始套餐通用流量" allow-clear />
                      <a-input v-model="form.endSetMealGeneralFlow" placeholder="结束套餐通用流量" allow-clear />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addSetMealDirectionalFlow" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input v-model="form.addSetMealDirectionalFlow" placeholder="开始套餐定向流量" allow-clear />
                      <a-input v-model="form.endSetMealDirectionalFlow" placeholder="结束套餐定向流量" allow-clear />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addCallMinutes" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input v-model="form.addCallMinutes" placeholder="开始通话时长" allow-clear />
                      <a-input v-model="form.endCallMinutes" placeholder="结束通话时长" allow-clear />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addFirstPayAmount" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input v-model="form.addFirstPayAmount" placeholder="开始首充金额" allow-clear />
                      <a-input v-model="form.endFirstPayAmount" placeholder="结束首充金额" allow-clear />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addCommission" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input v-model="form.addCommission" placeholder="开始佣金" allow-clear />
                      <a-input v-model="form.endCommission" placeholder="结束佣金" allow-clear />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addDiscountTime" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input v-model="form.addDiscountTime" placeholder="开始优惠时长" allow-clear />
                      <a-input v-model="form.endDiscountTime" placeholder="结束优惠时长" allow-clear />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="age" hide-label>
                    <a-input v-model="form.age" placeholder="请输入年龄" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="btns" hide-label>
                    <a-space :size="15">
                      <a-button type="primary" html-type="submit" @click="doRefresh(1)">
                        <template #icon> <icon-search /> </template>
                        搜索
                      </a-button>
                      <a-button @click="resetFn">
                        <template #icon>
                          <icon-sync theme="outline" size="14" />
                        </template>
                        <template #default>重置</template>
                      </a-button>
                    </a-space>
                  </a-form-item>
                </a-col>
                <a-col :span="24"
                  style="padding-top: 20px;padding-bottom: 20px; box-sizing: border-box; border-top: 1px solid #f2f3f5;display: flex;justify-content: space-between;">
                  <a-space :size="15">
                    <a-button type="primary" @click="addGoodFn">
                      <template #default>新建</template>
                    </a-button>
                    <a-button type="outline" :loading="loading" @click="goodsExport">
                      <template #default>导出</template>
                    </a-button>
                    <a-button type="outline" @click="openClass">
                      <template #default>商品分类</template>
                    </a-button>
                    <a-button type="outline" @click="openFreight">
                      <template #default>运费模板</template>
                    </a-button>
                    <a-button type="outline" @click="openStock">
                      <template #default>客户库存</template>
                    </a-button>
                    <a-button type="outline" @click="openOneCodeEr(1)">
                      <template #default>商城链接</template>
                    </a-button>
                    <a-button type="outline" @click="openMallSys">
                      <template #default>商城设置</template>
                    </a-button>
                    <!-- <a-button type="outline" @click="openUser">
            <template #default>商城分润</template>
          </a-button> -->
                    <a-button type="outline" @click="clickSucai">
                      <template #default>素材库</template>
                    </a-button>
                    <a-button type="outline" @click="getDiviSettingForm">
                      <template #default>分润设置</template>
                    </a-button>
                    <a-button type="outline" @click="openIntimidate">
                      <template #default>自动打单</template>
                    </a-button>
                    <a-button type="outline" @click="openProductChangeLog">
                      <template #default>商品日志</template>
                    </a-button>
                  </a-space>
                  <a-space :size="15">
                    <TableConfig @update-border="onUpdateBorder" @update-striped="onUpdateStriped"
                      @refresh="doRefresh" />
                  </a-space>
                </a-col>
              </a-row>
            </a-form>
          </template>
        </TableHeader>
      </template>
    </TableBody>
    <a-row :gutter="20" style="margin: 0; margin-bottom: 50px" v-if="table.dataList.length <= 0">
      <a-spin style="width: 100%; border-radius: 10px" :loading="loadingList">
        <div style="width: 100%; border-radius: 10px">
          <a-empty />
        </div>
      </a-spin>
    </a-row>
    <div v-else class="contenBox" style="margin-bottom: 20px;">
      <div class="items" v-for="(item, index) in table.dataList" :key="index">
        <img v-show="item.operator[0] == 0" src="@/assets/yd.png" alt="" class="imgBcg" />
        <img v-show="item.operator[0] == 1" src="@/assets/lt.png" alt="" class="imgBcg" />
        <img v-show="item.operator[0] == 2" src="@/assets/dx.png" alt="" class="imgBcg" />
        <img v-show="item.operator[0] == 3" src="@/assets/gd.png" alt="" class="imgBcg" />
        <div class="topBox">
          <div class="shareBtns">
            <span v-if="item.mainPush == true" class="zhuClass">
              主推
            </span>
            {{ item.name }}
          </div>
          <div class="shareBtn">
            <a-switch size="small" @change="changeState(item)" v-model="item.state" :checked-value="true"
              :unchecked-value="false" />
          </div>
          <div class="leftImageAges" style="margin-top: 30px">
            <a-image class="leftImage" @click="openImg(item)" fit="contain" :preview="false"
              :src="reSetImage(item.img[0])" alt="" />
            <div class="ages"> <a-rate v-model="item.starRating" readonly /></div>
          </div>

          <div class="cardTags" style="margin-top: 30px; z-index: 3">
            <div class="tags" v-if="item.tagList.length > 0">
              <!-- <a-tag checkable style="margin-right: 10px"> -->
              <!-- <img
                  style="width: 16px; height: 16px"
                  v-for="(item1, index) in treeData.OperatorAllList"
                  v-show="item1.type == item.operator"
                  :src="item1.logPath"
                  alt=""
                  :key="index"
              /> -->
              <!-- </a-tag> -->
              <div v-for="items in item.tagList" :key="items.id">
                <div v-if="items.type == 0" :style="{
                  marginRight: '5px',
                  fontSize: '10px',
                  borderRadius: '3px', 'color': items.fontColor ? items.fontColor : '', 'padding': '2px 5px', 'background': items.fillColor ? items.fillColor : '', 'border': '1px solid' + (items.frameColor ? items.frameColor : '#ffffff')
                }">
                  {{ items.name }}
                </div>
                <img v-else style="width: 100%;height: 20px;margin-right: 5px;" :src="items.img" alt="" />
              </div>
            </div>
            <p class="textItemsHalf">商品ID：{{ item.id }}</p>
            <div class="textItemsHalf">归属地：

              <span>{{
                item.belongingPlace == 0
                  ? '随机归属地'
                  : item.belongingPlace == 1
                    ? '固定归属地'
                    : '收货归属地'
              }}</span>

            </div>
            <div class="textItemsHalf">商品售价：<span>{{ item.price }}</span>

            </div>
            <div class="textItemsHalf">商品成本：<span>{{ item.cost }}</span>

            </div>
            <div class="textItemsHalf">年龄限制：
              <span v-if="item.minAge && item.maxAge">
                {{ item.minAge }}-{{ item.maxAge }}周岁
              </span>
              <span v-else>
                无限制
              </span>
            </div>
            <div class="textItemsHalf">选号方式：
              <span>{{
                item.selectNumberType == 0
                  ? '随机号码'
                  : item.selectNumberType == 1
                    ? '激活号码'
                    : item.selectNumberType == 2
                      ? '在线选号'
                      : item.selectNumberType == 3
                        ? '号池选号'
                        : '- - -'
              }}</span>
            </div>
            <div class="textItemsHalf">资源名称：{{ item.mallChannel.name }}</div>
            <div class="textItems" style="font-size: 15px;">商品佣金：<span style="color: #3491FA;">{{ item.commission }}元
                /
                <span>{{
                  item.commissionRule == 0
                    ? '秒返'
                    : item.commissionRule == 1
                      ? '次月底返'
                      : '月月返'
                }}</span></span></div>
          </div>
          <a-tooltip :content="item.areaName">
            <div class="jinfaBox" v-if="item.areaType == 1">
              禁发区域：<span>{{ item.areaName ? item.areaName : '暂无禁发区域' }}</span>
            </div>
            <div class="jinfaBox1" v-else-if="item.areaType == 0">
              可发区域：<span>{{ item.areaName ? item.areaName : '暂无可发区域' }}</span></div>
          </a-tooltip>
        </div>
        <div class="cardIformation">
          <div class="halfText1">套餐资费：{{ item.setMealPrice ? item.setMealPrice : 0 }}元</div>
          <div class="halfText1">通用流量：{{ item.setMealGeneralFlow ? item.setMealGeneralFlow : 0 }}G</div>
          <div class="halfText1">定向流量：{{ item.setMealDirectionalFlow ? item.setMealDirectionalFlow : 0 }}G</div>
          <div class="halfText1">免费通话：{{ item.callMinutes ? item.callMinutes : 0 }}分钟</div>
          <div class="halfText1">优惠时长：{{ item.discountTime ? item.discountTime : 0 }}月/{{
            item.discountTimeType == 0 ? '固定优惠' : '到期可续'
          }}</div>
          <div class="halfText1">创建时间：{{ item.addTime }}</div>
          <a-tooltip :content="item.settlementRequire">
            <div class="halfText2">结算要求：{{ item.settlementRequire }} </div>
          </a-tooltip>
          <a-tooltip :content="item.setMealIntroduce">
            <div class="halfText2" style="margin-top: 5px;">套餐介绍：{{ item.setMealIntroduce }} </div>
          </a-tooltip>
        </div>
        <div class="btns">
          <div class="btnItem" @click="openUpdateGood(item)">编辑商品</div>
          <div class="btnItem" @click="showDetail(item)">商品资料</div>
          <div class="btnItem" @click="openOneCodeEr(2, item)">分享商品</div>
          <div class="btnItem" @click="openProfitGood(item)">一键分润</div>
          <div class="btnItem" @click="copyGood(item)">复制商品</div>
          <div class="btnItem" @click="openDeleGood(item)">删除商品</div>
          
        </div>
      </div>
      <div style="width: 32.6%"></div>
      <div style="width: 32.6%"></div>
      <div style="width: 32.6%"></div>
    </div>
    <div class="fixedBoxBottom"
      style="margin-top: 0px; z-index: 5; height: 50px; display: flex; justify-content: center">
      <a-pagination show-jumper position="center" v-model:current="pagination.page" v-model:pageSize="pagination.pageSize"
        :total="pagination?.pageCount" :size="pagination.pageSize" :page-size-options="[12, 24, 36, 48, 60]" show-total
        show-page-size @page-size-change="onPageSizeChange" @change="onChange" />
    </div>
    <!-- 多项搜索 -->
    <a-modal v-model:visible="multipleVisible" @before-close="close" title="多条件搜索" width="400px" :mask-closable="false"
      title-align="start">
      <a-textarea v-model="multipleText" placeholder="请输入搜索条件，一行一个" allow-clear />
      <template #footer>
        <a-space>
          <a-button @click="multipleVisible = false">取消</a-button>
          <a-button type="primary" @click="multipleFn">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-modal v-model:visible="showSucaiKu" @before-close="close" title="素材库" title-align="start"
      :body-style="{ padding: '0px !important' }" width="1027px" height="500px" :mask-closable="false" :footer="false">
      <ImageChoose :activeTag="'pageShow'" v-if="showSucaiKu == true" />
      <template #footer>
        <a-space>
          <a-button @click="showSucaiKu = false">取消</a-button>
          <a-button type="primary" @click="multipleFn">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 新建商品 -->
    <a-drawer :width="1040" :visible="goodVisible" unmountOnClose :title="goodTitle" @before-close="beforeCloseGood"
      @close="beforeCloseGood" @cancel="beforeCloseGood">
      <Scrollbar class="wrapper">
        <a-collapse :default-active-key="[1, 2, 3, 4, 5, 6]" :bordered="false" expand-icon-position="right"
          v-model:active-key="topList">
          <a-form ref="goodRef" label-align="left" :auto-label-width="true" :labelCol="{ span: 4 }" layout="vertical"
            :model="goodInfo">
            <a-collapse-item :key="1">
              <template #header>
                <div class="box">
                  <div class="line"></div>
                  <div class="text">商品信息</div>
                </div>
              </template>
              <template #extra>
                <div>{{ topList.includes(1) ? '收起' : '展开' }}</div>
              </template>
              <a-row :gutter="20" style="padding: 0 10px">
                <a-col :span="12">
                  <a-form-item label="所属分类" field="classId" asterisk-position="end"
                    :rules="[{ required: true, message: '所属分类不能为空' }]" :validate-trigger="['change', 'input']">
                    <a-select placeholder="请选择所属分类" v-model="goodInfo.classId" allow-search>
                      <a-option v-for="item in classList" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="运营商" field="operator">
                    <a-checkbox-group class="radio-bcg" v-model="goodInfo.operator">
                      <a-checkbox :value="0">移动</a-checkbox>
                      <a-checkbox :value="1">联通</a-checkbox>
                      <a-checkbox :value="2">电信</a-checkbox>
                      <a-checkbox :value="3">广电</a-checkbox>
                    </a-checkbox-group>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="商品名称" field="name" asterisk-position="end"
                    :rules="[{ required: true, message: '商品名称不能为空' }]" :validate-trigger="['change', 'input']">
                    <a-input placeholder="请输入商品名称" v-model="goodInfo.name" style="width: 100%" />
                    <template #extra>
                      <div>商品的名称</div>
                    </template>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="商品成本" field="cost" asterisk-position="end"
                    :rules="[{ required: true, message: '商品成本不能为空' }]" :validate-trigger="['change', 'input']">
                    <a-input-number placeholder="请输入商品成本" v-model="goodInfo.cost" :min="0" style="width: 100%" />
                    <template #extra>
                      <div>商品的成本价</div>
                    </template>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="商品售价" field="price" asterisk-position="end"
                    :rules="[{ required: true, message: '商品售价不能为空' }]" :validate-trigger="['change', 'input']">
                    <a-input-number placeholder="请输入商品售价" v-model="goodInfo.price" :min="0" style="width: 100%" />
                    <template #extra>
                      <div>商品的默认售价</div>
                    </template>
                  </a-form-item>
                </a-col>
                <a-col :span="12" v-if="goodInfo.id">
                  <a-form-item label="商品状态" field="idCard">
                    <a-radio-group class="radio-bcg" v-model="goodInfo.state">
                      <a-radio :value="true">
                        <template #radio="{ checked }">
                          <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">上架</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="false">
                        <template #radio="{ checked }">
                          <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">下架</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="绑定系列" field="seriesId">
                    <a-select v-model="goodInfo.seriesId" placeholder="请选择系列" allow-clear allow-search>
                      <a-option v-for="item in seriesNo" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                    <template #extra>
                      <div>绑定系列后，客户如果绑定了对应的系列，商品内可查看对应套餐的成本价</div>
                    </template>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="商品图片" field="img">
                    <a-upload action="/app/file/upload" :show-file-list="false" @success="onSuccessBcg"
                      :image-preview="true">
                      <template #upload-button>
                        <div class="arco-upload-list-picture custom-upload-avatar" v-if="goodInfo.img">
                          <img :src="goodInfo.img" />
                          <div class="arco-upload-list-picture-mask">
                            <IconEdit />
                          </div>
                        </div>
                        <div class="arco-upload-picture-card" v-else>
                          <div class="arco-upload-picture-card-text">
                            <IconPlus />
                          </div>
                        </div>
                        <!-- </div> -->
                      </template>
                    </a-upload>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-collapse-item>
            <a-collapse-item :key="2">
              <template #header>
                <div class="box">
                  <div class="line"></div>
                  <div class="text">下单信息</div>
                </div>
              </template>
              <template #extra>
                <div>{{ topList.includes(2) ? '收起' : '展开' }}</div>
              </template>
              <a-row :gutter="20" style="padding: 0 10px">
                <a-col :span="12">
                  <a-form-item label="售价限制">
                    <a-input-group style="width: 100%">
                      <a-input-number :min="0.01" v-model="goodInfo.minLimit" placeholder="最低金额" />
                      <a-input-number :min="0.01" v-model="goodInfo.maxLimit" placeholder="最高金额" />
                    </a-input-group>
                    <template #extra>
                      <div>售价限制，主要是限制代理设置售价的范围</div>
                    </template>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="商品销量" field="sales">
                    <a-input-number placeholder="请输入商品销量" v-model="goodInfo.sales" :min="0" style="width: 100%" />
                    <template #extra>
                      <div>商城页面展示的商品销量</div>
                    </template>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="商品库存" field="stockType">
                    <a-input-group style="width: 100%">
                      <a-input allow-clear v-model="goodInfo.stock" placeholder="请输入商品库存">
                        <template #append>
                          <a-radio-group v-model="goodInfo.stockType">
                            <a-radio :value="0">
                              <template #radio="{ checked }">
                                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                                  <div className="custom-radio-card-mask">
                                    <div className="custom-radio-card-mask-dot"></div>
                                  </div>
                                  <div className="custom-radio-card-title">计算库存</div>
                                </div>
                              </template>
                            </a-radio>
                            <a-radio :value="1">
                              <template #radio="{ checked }">
                                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                                  <div className="custom-radio-card-mask">
                                    <div className="custom-radio-card-mask-dot"></div>
                                  </div>
                                  <div className="custom-radio-card-title">不计算库存</div>
                                </div>
                              </template>
                            </a-radio>
                          </a-radio-group>
                        </template>
                      </a-input>
                    </a-input-group>
                    <template #extra>
                      <div>计算库存的情况下，商品库存如果为0，将无法下单</div>
                    </template>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="身份证号" field="idCard">
                    <a-radio-group class="radio-bcg" v-model="goodInfo.idCard">
                      <a-radio :value="true">
                        <template #radio="{ checked }">
                          <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">开启</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="false">
                        <template #radio="{ checked }">
                          <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">关闭</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                    <template #extra>
                      <div>开启则下单时客户需要填写身份证号码</div>
                    </template>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="通用库存" field="generalStock">
                    <a-radio-group class="radio-bcg" v-model="goodInfo.generalStock">
                      <a-radio :value="true">
                        <template #radio="{ checked }">
                          <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">开启</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="false">
                        <template #radio="{ checked }">
                          <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">关闭</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                    <template #extra>
                      <div>开启通用库存后，客户如果有通用库存数量，可以直接免费下单</div>
                    </template>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="快递运费" field="postType">
                    <a-radio-group class="radio-bcg" v-model="goodInfo.postType">
                      <a-radio :value="0">
                        <template #radio="{ checked }">
                          <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">包邮</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="1">
                        <template #radio="{ checked }">
                          <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">固定邮费</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="2">
                        <template #radio="{ checked }">
                          <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">运费模板</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                    <template #extra>
                      <div>按照自己需求选择</div>
                    </template>
                  </a-form-item>
                </a-col>
                <a-col :span="12" v-if="goodInfo.postType == 1">
                  <a-form-item label="固定邮费" field="postFee" asterisk-position="end"
                    :rules="[{ required: true, message: '固定邮费不能为空' }]" :validate-trigger="['change', 'input']">
                    <a-input-number placeholder="请输入邮费" v-model="goodInfo.postFee" :min="0" style="width: 100%" />
                    <template #extra>
                      <div>对商品设置固定邮费</div>
                    </template>
                  </a-form-item>
                </a-col>

                <a-col :span="12" v-if="goodInfo.postType == 2">
                  <a-form-item label="运费模板" field="postTemplateId" asterisk-position="end"
                    :rules="[{ required: true, message: '运费模板不能为空' }]" :validate-trigger="['change', 'input']">
                    <a-select placeholder="请选择所属分类" v-model="goodInfo.postTemplateId" allow-search>
                      <a-option v-for="item in freightList" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                    <template #extra>
                      <div>对商品设置运费模板</div>
                    </template>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="地区设置" field="areaCode">
                    <a-button type="primary" @click="clickSet">
                      <template #icon>
                        <icon-plus />
                      </template>
                      <!-- Use the default slot to avoid extra spaces -->
                      <template #default>{{
                        goodInfo.areaType == 0 ? '设置禁区' : '设置可发地区'
                      }}</template>
                    </a-button>
                    <a-col :span="12">
                      <a-alert v-if="goodInfo.areaCode.length == 0" style="height: 32px; margin-left: 20px"
                        type="error">{{
                          goodInfo.areaType == 1 ? '未选择禁区' : '未选择可发地区' }}</a-alert>
                      <a-alert v-else style="height: 32px; margin-left: 20px" type="success">{{
                        goodInfo.areaType == 1 ? '已选择禁区' : '已选择可发地区'
                      }}</a-alert>
                    </a-col>
                    <template #extra>
                      <div>按照自己需求选择</div>
                    </template>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="地区类型" field="areaType">
                    <a-radio-group class="radio-bcg" v-model="goodInfo.areaType">
                      <a-radio :value="0">
                        <template #radio="{ checked }">
                          <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">可发货</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="1">
                        <template #radio="{ checked }">
                          <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">不可发货</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                    <template #extra>
                      <div>设置地区的类型</div>
                    </template>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-collapse-item>
            <a-collapse-item :key="2">
              <template #header>
                <div class="box">
                  <div class="line"></div>
                  <div class="text">商品介绍</div>
                </div>
              </template>
              <template #extra>
                <div>{{ topList.includes(2) ? '收起' : '展开' }}</div>
              </template>
              <a-row :gutter="20" style="padding: 0 10px">
                <a-col :span="24">
                  <RichTextEditor v-model="goodInfo.content" ref="richTextEditors" />
                </a-col>
              </a-row>
            </a-collapse-item>
          </a-form>
        </a-collapse>
      </Scrollbar>
      <template #footer>
        <a-space v-if="goodInfo.id">
          <a-button @click="beforeCloseGood">取消</a-button>
          <a-button type="primary" @click="handleSubmitGood">确定</a-button>
        </a-space>
        <div v-else style="display: flex; justify-content: space-between">
          <a-checkbox v-model="checked1">继续新建下一个套餐</a-checkbox>
          <a-space>
            <a-button @click="beforeCloseGood">取消</a-button>
            <a-button type="primary" @click="handleSubmitGood">确定</a-button>
          </a-space>
        </div>
      </template>
    </a-drawer>
    <!-- 设置可发货地区/禁区 -->
    <a-modal v-model:visible="regionVisible" @before-close="cancelRegion"
      :title="goodInfo.regionalRestrictionsType == 0 ? '设置禁区' : '设置可发地区'" width="600px" :mask-closable="false"
      title-align="start">
      <a-spin :loading="loadingTree" tip="加载中····" style="width: 100%">
        <a-scrollbar style="height: 600px; overflow: auto">
          <a-tree :virtualListProps="{
            height: 600,
          }" :checkable="true" checked-strategy="all" tree-checked-strategy="all" v-model:checked-keys="selectList"
            :data="regionList" :field-names="{ key: 'code', title: 'name' }" />
        </a-scrollbar>
      </a-spin>
      <template #footer>
        <a-space>
          <a-button @click="cancelRegion">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkRegion">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 设置分类 -->
    <a-modal v-model:visible="classVisible" @before-close="classVisible = false" title="设置分类" width="637px"
      :mask-closable="false" title-align="start" :footer="false">
      <a-space :size="15" style="margin-bottom: 20px">
        <a-button type="primary" @click="addClass">
          <template #icon>
            <icon-plus />
          </template>
          <template #default>新建</template>
        </a-button>
      </a-space>

      <a-table :loading="classLoading" :bordered="{ wrapper: true, cell: tables.bordered }"
        :stripe="(tables.striped as boolean)" :row-class-name="rowClassNameFun" :data="classList" :pagination="false"
        :column-resizable="true" :rowKey="rowKey" table-layout-fixed @change="handleChange"
        :draggable="{ type: 'handle', width: 40 }">
        <template #columns>
          <a-table-column v-for="item of classTableList" :key="item.key" align="left" :width="item.width"
            :title="(item.title as string)" :data-index="(item.key as string)" :ellipsis="true" :tooltip="true">
            <template v-if="item.key === 'actions'" #cell="{ record }">
              <a-space :size="2">
                <a-button class="list-button" type="text" size="small" @click="openUpdateClass(record)">编辑</a-button>
                <a-button class="list-button" type="text" size="small" status="warning"
                  @click="openDeleClass(record)">删除</a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-modal>
    <!-- 新建/编辑分类 -->
    <a-modal v-model:visible="classPop" @before-close="handleCancelClass" :title="classInfoTitle" width="600px"
      :mask-closable="false" title-align="start">
      <a-form ref="classRef" :auto-label-width="true" :model="classInfo">
        <a-form-item label="分类名称" field="name" :rules="[
          { required: true, message: '分类名称不能为空' },
          { minLength: 1, maxLength: 100, message: '分类名称必须小于100个字符' },
        ]" :validate-trigger="['change', 'input']">
          <a-input v-model.trim="classInfo.name" placeholder="请输入分类名称" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelClass">取消</a-button>
          <a-button type="primary" @click="handleBeforeClass">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 运费模板 -->
    <a-modal v-model:visible="freightVisible" @before-close="freightVisible = false" title="运费模板" width="637px"
      :mask-closable="false" title-align="start" :footer="false">
      <a-space :size="15" style="margin-bottom: 20px">
        <a-button type="primary" @click="addFreight">
          <template #icon>
            <icon-plus />
          </template>
          <template #default>新建</template>
        </a-button>
      </a-space>

      <a-table :loading="freightLoading" :bordered="{ wrapper: true, cell: tables.bordered }"
        :stripe="(tables.striped as boolean)" :row-class-name="rowClassNameFun" :data="freightList" :pagination="false"
        :column-resizable="true" :rowKey="rowKey" table-layout-fixed>
        <template #columns>
          <a-table-column v-for="item of freightTableList" :key="item.key" align="left" :width="item.width"
            :title="(item.title as string)" :data-index="(item.key as string)" :ellipsis="true" :tooltip="true">
            <template v-if="item.key === 'actions'" #cell="{ record }">
              <a-space :size="2">
                <a-button class="list-button" type="text" size="small" @click="openUpdateFreight(record)">编辑</a-button>
                <a-button class="list-button" type="text" size="small" status="warning"
                  @click="openDeleFreight(record)">删除</a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-modal>
    <!-- 新建/编辑运费模板 -->
    <a-modal v-model:visible="freightPop" @before-close="handleCancelFreight" :title="freightInfoTitle" width="600px"
      :mask-closable="false" title-align="start">
      <a-form ref="freightRef" :auto-label-width="true" :model="freightInfo">
        <a-form-item label="模板名称" field="name" :rules="[
          { required: true, message: '模板名称不能为空' },
          { minLength: 1, maxLength: 100, message: '模板名称必须小于100个字符' },
        ]" :validate-trigger="['change', 'input']" asterisk-position="end">
          <a-input v-model.trim="freightInfo.name" placeholder="请输入模板名称" allow-clear />
        </a-form-item>
        <div v-for="(post, index) of freightInfo.list" :key="index">
          <a-form-item style="width: 100%" :field="`posts.${index}.value`" :label="index == 0 ? '地区运费' : ''">
            <a-row class="grid-demo">
              <a-col :span="24" style="display: flex; align-items: center">
                <a-input-group>
                  <!-- <a-select
                    :style="{ width: '220px' }"
                    placeholder="请选择地区"
                    v-model="post.code"
                    multiple
                    :max-tag-count="1"
                    allow-clear
                  >
                    <a-option v-for="item in regionList" :key="item.code" :value="item.code">{{
                      item.name
                    }}</a-option>
                  </a-select> -->
                  <a-tree-select :allow-search="{
                    retainInputValue: true,
                  }" multiple tree-checkable tree-checked-strategy="all" :scrollbar="false" v-model="post.code"
                    :allow-clear="true" :tree-check-strictly="false" :filter-tree-node="useCommon.filterTreeNode"
                    :data="regionList" :max-tag-count="1" :field-names="{
                      key: 'code',
                      title: 'name',
                      children: 'children',
                    }" :treeProps="{
                      virtualListProps: {
                        height: 200,
                      },
                    }" :style="{ width: '220px' }" placeholder="请选择地区" />
                  <a-input-number v-model="post.postFee" :style="{ width: '220px' }" :min="0.01" placeholder="邮费金额" />
                </a-input-group>

                <i-add style="cursor: pointer; margin-left: 10px" v-if="index == 0" size="18" @click="addItem" />
                <i-reduce style="cursor: pointer; margin-left: 10px" v-else size="18" @click="handleDelete(index)" />
              </a-col>
            </a-row>
          </a-form-item>
        </div>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelFreight">取消</a-button>
          <a-button type="primary" @click="handleBeforeFreight">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 客户库存 -->
    <a-modal v-model:visible="stockVisible" @before-close="stockVisible = false" title="客户库存" width="637px"
      :mask-closable="false" title-align="start" :footer="false">
      <a-table :loading="stockLoading" :bordered="{ wrapper: true, cell: tables.bordered }"
        :stripe="(tables.striped as boolean)" :row-class-name="rowClassNameFun" :data="stockList" :pagination="false"
        :column-resizable="true" :rowKey="rowKey" table-layout-fixed>
        <template #columns>
          <a-table-column v-for="item of stockTableList" :key="item.key" align="left" :width="item.width"
            :title="(item.title as string)" :data-index="(item.key as string)" :ellipsis="true" :tooltip="true">
            <template v-if="item.key === 'generalStock'" #cell="{ record }">
              <span v-if="record.mallGeneralStock" @click="openTku(record, 0)">
                <span>{{ record.mallGeneralStock.generalStock }}</span>
              </span>
              <span v-if="!record.mallGeneralStock" @click="openTku(record, 0)">0</span>
            </template>
            <template v-if="item.key === 'mallStock'" #cell="{ record }">
              <span v-if="record.mallGeneralStock" @click="openMallStock(record)">
                <span v-if="record.mallGeneralStock.mallMallStock">{{
                  record.mallGeneralStock.mallMallStock.mallStock
                }}</span>
                <span v-else>0</span>
              </span>
              <span v-else @click="openMallStock(record)">0</span>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <TableFooter :pagination="paginationStock" position="center" />
    </a-modal>
    <!-- 商品库存 -->
    <a-modal v-model:visible="mallStockVisible" @before-close="mallStockClose" title="商品库存" width="1000px"
      :mask-closable="false" title-align="start">
      <a-form :auto-label-width="true" :model="mallStockForm">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item label="搜索条件" field="classId">
              <a-select v-model="mallStockForm.classId" style="width: 225px" placeholder="请选择商品分类" allow-clear
                @change="changeStockSeach">
                <a-option v-for="item in classList" :key="item.id" :value="item.id">{{
                  item.name
                }}</a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="mallId" hide-label>
              <a-select allow-search v-model="mallStockForm.mallId" placeholder="请选择商品" allow-clear
                :options="goodAllList" @change="changeStockSeach" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-table :loading="mallStockLoading" :bordered="{ wrapper: true, cell: tables.bordered }"
        :stripe="(tables.striped as boolean)" :row-class-name="rowClassNameFun" :data="mallStockList"
        :pagination="false" :column-resizable="true" :rowKey="rowKey" table-layout-fixed :row-selection="rowSelection"
        v-model:selectedKeys="selectedKeys" :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }">
        <template #columns>
          <a-table-column v-for="item of mallStockTableList" :key="item.key" align="left" :width="item.width"
            :title="(item.title as string)" :data-index="(item.key as string)" :ellipsis="true" :tooltip="true">
            <template v-if="item.key === 'mallStock'" #cell="{ record }">
              <span v-if="record.mallStock" @click="openTku(record, 1)">
                {{ record.mallStock }}
              </span>
              <span v-if="!record.mallStock" @click="openTku(record, 1)">0</span>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <TableFooter :pagination="paginationMallStock" position="center" />
      <template #footer>
        <a-space>
          <a-input-number hide-button :style="{ width: '320px' }" v-model="type0Num" placeholder="请输入充值数量" allow-clear>
            <template #append>
              <a-button type="primary" style="margin-left: 12px" @click="allStockFn">确认充值</a-button>
            </template>
          </a-input-number>
        </a-space>
      </template>
    </a-modal>
    <!-- 商城设置 -->
    <a-modal v-model:visible="mallSysVisible" @before-close="handleCancelMallSys" title="商城设置" :footer="false"
      width="600px" :mask-closable="false" title-align="start">
      <div class="tabs-button" style="margin-bottom: 20px">
        <a-radio-group style="width: 100%" v-model="position" type="button">
          <a-radio style="width: 50%;" value="mall">商城设置</a-radio>
          <a-radio style="width: 50%;" value="yunduan">云端设置</a-radio>
        </a-radio-group>
      </div>
      <div v-if="position == 'mall'">
        <a-form ref="mallSysRef" :auto-label-width="true" :model="mallSysInfo">
          <a-form-item label="商城名称" field="name" :rules="[
            { required: true, message: '商城名称不能为空' },
            { minLength: 1, maxLength: 100, message: '商城名称必须小于100个字符' },
          ]" :validate-trigger="['change', 'input']" asterisk-position="end">
            <a-input v-model.trim="mallSysInfo.name" placeholder="请输入商城名称" allow-clear />
          </a-form-item>
          <a-form-item label="商城码" field="code">
            <a-input v-model.trim="mallSysInfo.code" placeholder="请输入商城码" allow-clear />
          </a-form-item>
          <a-form-item label="商城客服" field="customerServiceType">
            <a-radio-group class="radio-bcg" v-model="mallSysInfo.customerServiceType">
              <a-radio :value="0">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">图片</div>
                  </div>
                </template>
              </a-radio>
              <a-radio :value="1">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">链接</div>
                  </div>
                </template>
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <div v-if="mallSysInfo.customerServiceType == 0">
            <a-form-item label="客服图片" field="img">
              <a-upload action="/app/file/upload" :show-file-list="false" @error="onError" @success="onSuccessBcg1"
                :image-preview="true">
                <template #upload-button>
                  <div class="arco-upload-list-picture custom-upload-avatar" v-if="mallSysInfo.customerServiceImg">
                    <img :src="mallSysInfo.customerServiceImg" />
                    <div class="arco-upload-list-picture-mask">
                      <IconEdit />
                    </div>
                  </div>
                  <div class="arco-upload-picture-card" v-else>
                    <div class="arco-upload-picture-card-text">
                      <IconPlus />
                    </div>
                  </div>
                  <!-- </div> -->
                </template>
              </a-upload>
            </a-form-item>
            <a-form-item label="客服微信" field="customerService">
              <a-input v-model.trim="mallSysInfo.customerService" placeholder="请输入微信号" allow-clear />
            </a-form-item>
          </div>
          <div v-if="mallSysInfo.customerServiceType == 1">
            <a-form-item label="客服链接" field="customerService" :rules="[{ required: true, message: '客服链接不能为空' }]"
              :validate-trigger="['change', 'input']" asterisk-position="end">
              <a-input v-model.trim="mallSysInfo.customerService" placeholder="请输入客服链接" allow-clear />
            </a-form-item>
          </div>
          <div v-for="(item, index) in mallSysInfo.banner" :key="index">
            <a-form-item :label="index == 0 ? '商城轮番' : ''" field="img">
              <a-upload action="/app/file/upload" :show-file-list="false" @success="onSuccessBcg2" @error="onError"
                :image-preview="true" @click="imgIndex = index">
                <template #upload-button>
                  <div class="arco-upload-list-picture custom-upload-avatar" v-if="item.img">
                    <img :src="item.img" />
                    <div class="arco-upload-list-picture-mask">
                      <IconEdit />
                    </div>
                  </div>
                  <div class="arco-upload-picture-card" v-else>
                    <div class="arco-upload-picture-card-text">
                      <IconPlus />
                    </div>
                  </div>
                  <!-- </div> -->
                </template>
              </a-upload>
            </a-form-item>
            <a-form-item label="" field="name">
              <a-input v-model.trim="item.link" placeholder="请输入跳转链接" allow-clear>
                <template #append>
                  <a-button type="text" class="list-button" @click="addItemMall">新增</a-button>
                  <a-button type="text" status="danger" class="list-button"
                    @click="handleDeleteMall(index)">删除</a-button>
                </template>
              </a-input>
            </a-form-item>
          </div>
          <a-form-item label="下架功能" field="closePermissions">
            <a-radio-group class="radio-bcg" v-model="mallSysInfo.closePermissions">
              <a-radio :value="true">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">开启</div>
                  </div>
                </template>
              </a-radio>
              <a-radio :value="false">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">关闭</div>
                  </div>
                </template>
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="优先库存" field="priorityStock">
            <a-radio-group class="radio-bcg" v-model="mallSysInfo.priorityStock">
              <a-radio :value="true">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">开启</div>
                  </div>
                </template>
              </a-radio>
              <a-radio :value="false">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">关闭</div>
                  </div>
                </template>
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="商城LOGO" field="logo">
            <a-upload action="/app/file/upload" :show-file-list="false" @success="onSuccessBcg3" @error="onError"
              :image-preview="true">
              <template #upload-button>
                <div class="arco-upload-list-picture custom-upload-avatar" v-if="mallSysInfo.logo">
                  <img :src="mallSysInfo.logo" />
                  <div class="arco-upload-list-picture-mask">
                    <IconEdit />
                  </div>
                </div>
                <div class="arco-upload-picture-card" v-else>
                  <div class="arco-upload-picture-card-text">
                    <IconPlus />
                  </div>
                </div>
                <!-- </div> -->
              </template>
            </a-upload>
          </a-form-item>
        </a-form>
        <div class="bottomBtn" style="display: flex;justify-content: flex-end;">
          <a-space>
            <a-button @click="handleCancelMallSys">取消</a-button>
            <a-button type="primary" @click="handleBeforeMallSys">确定</a-button>
          </a-space>
        </div>
      </div>
      <div v-if="position == 'yunduan'">
        <a-form ref="cloudRef" :auto-label-width="true" :model="cloudForm" :labelCol="{ span: 8 }" @submit="cloudSet">
          <a-alert :show-icon="false" style="background-color: #e8f7ff; color: #3491fa;margin-bottom: 20px;">
            设置后，请勿随意切换云端存储，否则可能导致图片无法查看！！！</a-alert>
          <a-form-item label="渠道名称" field="name" asterisk-position="end"
            :rules="[{ required: true, message: '请输入渠道名称' }]" :validate-trigger="['change', 'input']">
            <a-input placeholder="请输入渠道名称" v-model.trim="cloudForm.name" allow-clear />
          </a-form-item>
          <a-form-item label="储存状态" field="state">
            <a-radio-group class="radio-bcg" v-model="cloudForm.state">
              <a-radio :value="1">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">开启</div>
                  </div>
                </template>
              </a-radio>
              <a-radio :value="0">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">关闭</div>
                  </div>
                </template>
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="图片访问链接" field="url" asterisk-position="end"
            :rules="[{ required: true, message: '请输入访问链接' }]" :validate-trigger="['change', 'input']">
            <a-input placeholder="请输入访问链接" v-model.trim="cloudForm.url" allow-clear />
          </a-form-item>
          <a-form-item label="云存储厂商" field="coding">
            <a-radio-group class="radio-bcg" @change="cloudTypeChange" v-model="cloudForm.coding">
              <a-radio v-for="item in cloudTypeArray" :key="item.coding" :value="item.coding">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">{{ item.name }}</div>
                  </div>
                </template>
              </a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item v-for="(item, index) in cloudForm.params" :key="index" :label="item.name" :field="item.key">
            <a-input v-model="item.value" :placeholder="`请输入${item.name}`" />
          </a-form-item>

          <a-form-item label="备注" field="remarks" asterisk-position="end"
            :rules="[{ required: true, message: '请输入备注' }]" :validate-trigger="['change', 'input']">
            <a-input placeholder="请输入备注" v-model.trim="cloudForm.remarks" allow-clear />
          </a-form-item>
          <!-- <a-form-item>
                  <a-button html-type="submit" type="primary" long>保存设置</a-button>
                </a-form-item> -->
        </a-form>
        <div class="bottomBtn" style="display: flex;justify-content: flex-end;">
          <a-space>
            <a-button @click="handleCancelMallSys">取消</a-button>
            <a-button type="primary" @click="cloudSet">确定</a-button>
          </a-space>
        </div>
      </div>
    </a-modal>
    <!-- 链接地址 -->
    <a-modal v-model:visible="linkShow" title="链接地址" width="521px" :mask-closable="false" title-align="start"
      :footer="false">
      <div style="display: flex; justify-content: center; margin: 20px">
        <img :src="imgUrl" style="width: 170px; height: 170px; text-align: center" alt="" />
      </div>
      <div style="display: flex; justify-content: center">
        <div style="
            width: 390px;
            background-color: #f2f3f5;
            border-radius: 4px;
            text-align: center;
            padding: 4px;
          ">
          <a id="bols" :href="urlsa" style="color: #000000" target="_blank">
            <div style="
                display: inline-block;
                white-space: pre-wrap;
                word-break: break-all;
                word-wrap: break-word;
              ">
              {{ urlsa }}
            </div>
          </a>
        </div>
      </div>
      <div style="display: flex; justify-content: center; margin: 20px">
        <div style="display: flex; width: 390px; justify-content: space-between">
          <a-button type="primary" status="success" long @click="downs">保存二维码</a-button>
          <div style="width: 40px"></div>
          <a-button type="primary" long @click="useCommon.copy(urlsa)">复制链接</a-button>
        </div>
      </div>
    </a-modal>
    <!-- 商城分润 -->
    <a-modal v-model:visible="userVisible" @before-close="userVisible = false" title="商城分润" width="637px"
      :mask-closable="false" title-align="start" :footer="false">
      <a-form :auto-label-width="true" :model="userInfo">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item field="userName" hide-label>
              <a-input placeholder="请输入客户名称" v-model="userInfo.userName" style="width: 100%" allow-clear
                @change="changeUser" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="grade" hide-label>
              <a-select v-model="userInfo.grade" placeholder="请选择账户等级" style="width: 100%" allow-clear
                @change="changeUser">
                <a-option value="1">一级客户</a-option>
                <a-option value="2">二级客户</a-option>
                <a-option value="3">三级客户</a-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-table :loading="userLoading" :bordered="{ wrapper: true, cell: tables.bordered }"
        :stripe="(tables.striped as boolean)" :row-class-name="rowClassNameFun" :data="userList" :pagination="false"
        :column-resizable="true" :rowKey="rowKey" table-layout-fixed>
        <template #columns>
          <a-table-column v-for="item of userTableList" :key="item.key" align="left" :width="item.width"
            :title="(item.title as string)" :data-index="(item.key as string)" :ellipsis="true" :tooltip="true">
            <template v-if="item.key === 'actions'" #cell="{ record }">
              <a-space :size="2">
                <a-button class="list-button" type="text" size="small" @click="openGoodProfit(record)">分润</a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <TableFooter :pagination="paginationUser" position="center" />
    </a-modal>
    <!-- 分润列表 -->
    <a-modal v-model:visible="goodProfitVisible" @before-close="goodProfitVisible = false" title="分润列表" width="800px"
      :mask-closable="false" title-align="start">
      <a-form :auto-label-width="true" :model="goodProfitInfo">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item field="classId" hide-label>
              <a-select v-model="goodProfitInfo.classId" style="width: 225px" placeholder="请选择商品分类" allow-clear
                @change="changeStockSeach">
                <a-option v-for="item in classList" :key="item.id" :value="item.id">{{
                  item.name
                }}</a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="mallId" hide-label>
              <a-select allow-search v-model="goodProfitInfo.mallId" placeholder="请选择商品" allow-clear
                :options="goodAllList" @change="changeStockSeach" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-table :loading="goodProfitLoading" :bordered="{ wrapper: true, cell: tables.bordered }"
        :stripe="(tables.striped as boolean)" :row-class-name="rowClassNameFun" :data="goodProfitList"
        :pagination="false" :column-resizable="true" :rowKey="rowKey" table-layout-fixed
        :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }">
        <template #columns>
          <a-table-column v-for="item of goodProfitTableList" :key="item.key" align="left" :width="item.width"
            :title="(item.title as string)" :data-index="(item.key as string)" :ellipsis="true" :tooltip="true"
            :fixed="item.fixed">
            <template v-if="item.key === 'mallCost'" #cell="{ record }">
              <span v-if="record.mallUser">
                {{ record.mallUser.cost }}
              </span>
              <span v-else> {{ record.cost }}</span>
            </template>
            <template v-if="item.key === 'mallPrice'" #cell="{ record }">
              <span v-if="record.mallUser">
                {{ record.mallUser.price }}
              </span>
              <span v-else> {{ record.price }}</span>
            </template>
            <template v-if="item.key === 'mallProfit'" #cell="{ record }">
              <span v-if="record.mallUser">
                {{ Math.floor((record.mallUser.cost - record.cost) * 100) / 100 }}
              </span>
              <span v-else>0</span>
            </template>
            <template v-if="item.key === 'actions'" #cell="{ record }">
              <div style="width: 168px; display: flex; flex-wrap: wrap">
                <a-button class="list-button" type="text" size="small" @click="openProfit(record)">编辑</a-button>
              </div>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <TableFooter :pagination="paginationMallStock" position="center" />
      <template #footer>
        <div style="display: flex; justify-content: space-between; width: 100%">
          <div></div>
          <a-space>
            <a-input-number hide-button :style="{ width: '320px' }" v-model="profitNum" placeholder="请输入分润比例"
              allow-clear>
              <template #append>
                <a-button type="primary" status="success" @click="mathProfit">辅助计算</a-button>
              </template>
            </a-input-number>
            <a-button type="primary" style="margin-left: 12px" @click="allProfit">确认分润</a-button>
          </a-space>
        </div>
      </template>
    </a-modal>
    <!-- 编辑分润 -->
    <a-modal v-model:visible="profitVisible" @before-close="handleCancelProfit" title="编辑分润" width="600px"
      :mask-closable="false" title-align="start">
      <a-form ref="profitRef" :auto-label-width="true" :model="profitInfo">
        <a-form-item label="商品成本" field="cost" :rules="[{ required: true, message: '商品成本不能为空' }]"
          :validate-trigger="['change', 'input']">
          <a-input-number v-model="profitInfo.cost" placeholder="请输入商品成本" allow-clear />
        </a-form-item>
        <a-form-item label="商品售价" field="price" :rules="[{ required: true, message: '商品售价不能为空' }]"
          :validate-trigger="['change', 'input']">
          <a-input-number v-model="profitInfo.price" placeholder="请输入商品售价" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelProfit">取消</a-button>
          <a-button type="primary" @click="handleBeforeProfit">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 充值库存 -->
    <a-modal v-model:visible="comStockVisible" @before-close="handleCancelComStock" title="充值库存" width="600px"
      :mask-closable="false" title-align="start">
      <a-form ref="comStockRef" :auto-label-width="true" :model="stockInfo">
        <a-form-item label="充值类型" field="cost">
          <a-radio-group class="radio-bcg" v-model="state">
            <a-radio :value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">增加</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">减少</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="充值数量" field="generalStock" :rules="[{ required: true, message: '充值数量不能为空' }]"
          :validate-trigger="['change', 'input']" asterisk-position="end">
          <a-input-number v-model="stockInfo.generalStock" placeholder="请输入充值数量" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelComStock">取消</a-button>
          <a-button type="primary" @click="handleBeforeComStock">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 分润设置 -->
    <a-modal v-model:visible="diviSettingShow" title="分润设置" width="500px" :before-close="closeDiviSetting"
      :mask-closable="false" title-align="start">
      <a-form ref="diviSettingRef" :auto-label-width="true" :model="diviSettingForm">
        <a-form-item label="自动划分" field="open">
          <a-radio-group class="radio-bcg" v-model="diviSettingForm.open">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">开启</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">关闭</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="保留利润" field="profit">
          <a-input allow-clear style="width: 100%" v-model="diviSettingForm.profit" :precision="0" :min="0"
            placeholder="请输入保留利润" >
            <template #append>
                        <a-radio-group  v-model="diviSettingForm.profitType">
                          <a-radio :value="0">
                            <template #radio="{ checked }">
                              <div
                                style="display: flex"
                                :class="{ 'custom-radio-card-checked': checked }"
                              >
                                <div className="custom-radio-card-mask">
                                  <div className="custom-radio-card-mask-dot"></div> </div
                                ><div className="custom-radio-card-title">百分比</div>
                              </div>
                            </template>
                          </a-radio>
                          <a-radio :value="1">
                            <template #radio="{ checked }">
                              <div
                                style="display: flex"
                                :class="{ 'custom-radio-card-checked': checked }"
                              >
                                <div className="custom-radio-card-mask">
                                  <div className="custom-radio-card-mask-dot"></div> </div
                                ><div className="custom-radio-card-title">金额</div>
                              </div>
                            </template>
                          </a-radio>
                        </a-radio-group>
                      </template>
            </a-input>
         </a-form-item></a-form>
      <template #footer>
        <a-space>
          <a-button @click="closeDiviSetting">取消</a-button>
          <a-button type="primary" :loading="loadingls" @click="setDiviSettingForm">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 自动打单 -->
    <a-modal v-model:visible="intimidateShow" title="自动打单" width="620px" :mask-closable="false" title-align="start"
      :footer="false">
      <a-space :size="15" style="margin-bottom: 20px">
        <a-button type="primary" @click="openIntimidateInfo">
          <template #icon>
            <icon-plus />
          </template>
          <template #default>新建</template>
        </a-button>
      </a-space>
      <a-table :loading="intimidateLoad" :bordered="{ wrapper: true, cell: tables.bordered }"
        :stripe="(tables.striped as boolean)" :row-class-name="rowClassNameFun" :data="intimidateList"
        :pagination="false" :column-resizable="true" :rowKey="rowKey" table-layout-fixed>
        <template #columns>
          <a-table-column v-for="item of intimidateTableList" :key="item.key" align="left" :width="item.width"
            :title="(item.title as string)" :data-index="(item.key as string)" :ellipsis="true" :tooltip="true">
            <template v-if="item.key === 'actions'" #cell="{ record }">
              <a-space :size="2">
                <a-button class="list-button" type="text" size="small"
                  @click="openUpdateIntimidate(record)">编辑</a-button>
                <a-button class="list-button" type="text" size="small" status="warning"
                  @click="openDeleIntimidate(record)">删除</a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-modal>
    <!-- 新建渠道 -->
    <a-modal v-model:visible="intimidateInfoShow" @before-close="handleCancelIntimidate" :title="intimidateInfoTitle"
      width="600px" :mask-closable="false" title-align="start">
      <a-form ref="intimidateRef" :auto-label-width="true" :model="intimidateInfo">
        <a-form-item label="渠道系统" label-align="right" field="coding">
          <a-radio-group @change="encodingFn" class="radio-bcg" v-model="intimidateInfo.coding">
            <a-radio v-for="item in fastMailList" :key="item.name" :value="item.coding">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">{{ item.name }}</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="渠道名称" field="name" :rules="[
          { required: true, message: '请输入渠道名称' },
          { minLength: 1, maxLength: 30, message: '长度在 1 - 20个字符' },
        ]" label-align="right" asterisk-position="end">
          <a-input placeholder="请输入渠道名称" v-model.trim="intimidateInfo.name" />
        </a-form-item>
        <a-form-item v-for="item in intimidateInfo.parameters" :key="item.key" :label="item.name" :field="item.key"
          label-align="right">
          <template #label>
            <div>{{ item.name }} <span v-if="item.required" style="color: red">*</span> </div>
          </template>
          <a-input v-if="item.parameterType == 0" :placeholder="`请输入${item.name}`" v-model.trim="item.value" />
          <a-radio-group v-if="item.parameterType == 1" class="radio-bcg" v-model="item.value">
            <a-radio value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">开启</div>
                </div>
              </template>
            </a-radio>
            <a-radio value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">关闭</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="渠道备注" label-align="right" field="remarks">
          <a-input placeholder="请输入渠道备注" v-model.trim="intimidateInfo.remarks" />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelIntimidate">取消</a-button>
          <a-button type="primary" @click="handleBeforeIntimidate">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 商品图片展示 -->
    <a-image-preview-group v-model:visible="imgShow" :default-current="0" infinite :srcList="imgArray" />
    <!-- 商品详情 -->
    <a-drawer v-model:visible="goodsDetailVisible" title="商品介绍" width="70%" :mask-closable="false" title-align="start"
      @before-close="detailCloseFn" :footer="false">
      <div class="goodsHead">
        <div style="display: flex;justify-content: space-between;align-items: center;">
          <div class="topBox">
            <a-image :preview="false" @click="openImg(goodsDetail)" :src="goodsDetail.imgs" class="leftImage" />
            <div class="cardTags">
              <p class="textItems" style="display: flex; align-items: center; font-size: 20px">
              <div v-for="items in goodsDetail.operator" :key="items" style="margin-right: 6px">
                <img v-if="items == 0" style="width: 15px; height: 15px" src="@/assets/yd.png" alt="" />
                <img v-if="items == 1" style="width: 15px; height: 15px" src="@/assets/lt.png" alt="" />
                <img v-if="items == 2" style="width: 15px; height: 15px" src="@/assets/dx.png" alt="" />
                <img v-if="items == 3" style="width: 15px; height: 15px" src="@/assets/gd.png" alt="" />
              </div>
              {{ goodsDetail.name }}
              </p>
              <p class="textItems">号卡佣金 {{ goodsDetail.commission }}元
                <span v-if="goodsDetail.commissionType == 2" style="margin-left: 2px">
                  x{{ goodsDetail.everyMonthCommission.length }}期
                </span>
                -
                <span>{{
                  goodsDetail.commissionRule == 0
                    ? '秒返'
                    : goodsDetail.commissionRule == 1
                      ? '次月底返'
                      : '月月返'
                }}</span>
              </p>
              <p class="textItems">商品ID：{{ goodsDetail.id }}</p>
              <p class="textItems">创建时间：{{ goodsDetail.addTime }} </p>
              <div class="tags">
                <div v-for="items in goodsDetail.tagList" :key="items.id" style="margin-right: 6px;">
                  <div v-if="items.type == 0"
                    :style="{ 'color': items.fontColor ? items.fontColor : '', 'padding': '2px 5px', 'background': items.fillColor ? items.fillColor : '', 'border': '1px solid' + (items.frameColor ? items.frameColor : '#ffffff') }">
                    {{ items.name }}
                  </div>
                  <img v-else style="width: 100%;height: 20px;" :src="items.img" alt="" />
                </div>
              </div>
            </div>
          </div>
          <div>
            <a-rate v-model="goodsDetail.starRating" style="font-size: 24px" readonly />
            <div
              style="width: 170px;line-height: 25px;text-align: center;background-color: #F5F5F5;border-radius: 3px;padding: 5px;">
              商品状态： <a-switch v-model="goodsDetail.state" @change="changeState(goodsDetail)" size="small">
                <template #checked-icon>
                  <icon-check />
                </template>
                <template #unchecked-icon>
                  <icon-close />
                </template>
              </a-switch>
            </div>
          </div>
        </div>
        <a-descriptions style="margin-top: 20px" :column="4" title="价格介绍" bordered
          :label-style="{ color: 'var(--color-neutral-10)' }" :value-style="{ height: 200 }">
          <a-descriptions-item :span="1" label="商品售价">
            {{ goodsDetail.price }}
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="商品成本">
            <span> {{ goodsDetail.cost }}</span>
          </a-descriptions-item>
          <a-descriptions-item :span="2" label="快递运费">
            {{
              goodsDetail.postType
                ? '包邮'
                : goodsDetail.postType == 1
                  ? goodsDetail.postFee
                  : '运费模板'
            }}
          </a-descriptions-item>
        </a-descriptions>
        <a-descriptions style="margin-top: 20px" :column="4" title="佣金介绍" bordered
          :label-style="{ color: 'var(--color-neutral-10)' }" :value-style="{ height: 200 }">
          <a-descriptions-item :span="1" label="号卡佣金">
            {{ goodsDetail.commission }}
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="佣金规则">
            <span>
              {{
                goodsDetail.commissionRule == 0
                  ? '秒返'
                  : goodsDetail.commissionRule == 1
                    ? '次月底返'
                    : '月月返'
              }}</span>
          </a-descriptions-item>
          <a-descriptions-item :span="2" label="结算要求">
            {{ goodsDetail.settlementRequire }}
          </a-descriptions-item>
          <a-descriptions-item :span="2" label="注意事项">
            <div v-html="goodsDetail.precautions"></div>
          </a-descriptions-item>
        </a-descriptions>
        <a-descriptions style="margin-top: 20px" :column="4" title="资费介绍" bordered
          :label-style="{ color: 'var(--color-neutral-10)' }" :value-style="{ height: 200 }">
          <a-descriptions-item :span="1" label="套餐资费">
            {{ goodsDetail.setMealPrice ? goodsDetail.setMealPrice : 0 }}
          </a-descriptions-item>
          <!-- <a-descriptions-item :span="1" label="套餐流量">
            {{ ((goodsDetail.packageFlow + goodsDetail.specifyFlow) / 1024).toFixed(2) }}G
          </a-descriptions-item> -->
          <a-descriptions-item :span="1" label="通用流量">
            {{ goodsDetail.setMealGeneralFlow ? goodsDetail.setMealGeneralFlow : 0 }}G
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="定向流量">
            {{ goodsDetail.setMealDirectionalFlow ? goodsDetail.setMealDirectionalFlow : 0 }}G
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="免费通话">
            {{ goodsDetail.callMinutes ? goodsDetail.callMinutes : 0 }}分钟
          </a-descriptions-item>
          <!-- <a-descriptions-item :span="1" label="通话价格">
            {{ goodsDetail.callFee }}
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="短信价格">
            {{ goodsDetail.smsFee }}
          </a-descriptions-item> -->
          <a-descriptions-item :span="1" label="原套餐资费">
            {{ goodsDetail.setMealOriginalPrice ? goodsDetail.setMealOriginalPrice : 0 }}
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="通用流量">
            {{ goodsDetail.setMealOriginalGeneralFlow ? goodsDetail.setMealOriginalGeneralFlow : 0 }}G
          </a-descriptions-item>
          <a-descriptions-item :span="2" label="定向流量">
            {{ goodsDetail.setMealOriginalDirectionalFlow ? goodsDetail.setMealOriginalDirectionalFlow : 0 }}G
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="首充金额">
            {{ goodsDetail.firstPayAmount ? goodsDetail.firstPayAmount : 0 }}元
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="首充描述">
            {{ goodsDetail.firstPayIntroduce }}
          </a-descriptions-item>
          <a-descriptions-item :span="2" label="合约期">
            {{ goodsDetail.contractTime ? goodsDetail.contractTime : 0 }}月
          </a-descriptions-item>
          <a-descriptions-item :span="4" label="套餐介绍">
            {{ goodsDetail.setMealIntroduce }}
          </a-descriptions-item>
        </a-descriptions>
        <a-descriptions style="margin-top: 20px" :column="4" title="其他介绍" bordered
          :label-style="{ color: 'var(--color-neutral-10)' }">
          <a-descriptions-item :span="1" label="归属地">
            <span>{{
              goodsDetail.belongingPlace == 0
                ? '随机归属地'
                : goodsDetail.belongingPlace == 1
                  ? '固定归属地'
                  : '收货归属地'
            }}</span>
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="证件号">
            <span>{{
              goodsDetail.idCard == 0 ? '隐藏' : goodsDetail.idCard == 1 ? '随意输' : '格式合法'
            }}</span>
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="验证方式">
            <span>{{
              goodsDetail.idCard == -1
                ? '不验证'
                : goodsDetail.idCard == 0
                  ? '验证码'
                  : goodsDetail.idCard == 1
                    ? '二要素'
                    : '三要素'
            }}</span>
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="选号方式">
            <span>{{
              goodsDetail.selectNumberType == 0
                ? '随机号码'
                : goodsDetail.selectNumberType == 1
                  ? '激活号码'
                  : goodsDetail.selectNumberType == 2
                    ? '在线选号'
                    : goodsDetail.selectNumberType == 3
                      ? '号池选号'
                      : '- - -'
            }}</span>
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="证件上传">
            <span>{{ goodsDetail.idCardImg == true ? '开启' : '关闭' }}</span>
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="商品库存">
            <span>{{ goodsDetail.stock }}【{{ goodsDetail.stockType == 0 ? '计算' : '不计算' }}】</span>
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="开卡限制">
            <span>{{
              goodsDetail.openCardNumber && goodsDetail.openCardTime
                ? goodsDetail.openCardNumber + '次 ' + goodsDetail.openCardTime + '月'
                : '- - -'
            }}</span>
          </a-descriptions-item>
          <a-descriptions-item :span="1" label="售价限制">
            <span>{{
              goodsDetail.minLimit && goodsDetail.maxLimit
                ? goodsDetail.minLimit + '-' + goodsDetail.maxLimit
                : '- - -'
            }}</span>
          </a-descriptions-item>
          <a-descriptions-item :span="4" label="风控词">
            <span>{{ goodsDetail.riskStr }}</span>
          </a-descriptions-item>
          <a-descriptions-item :span="2" :label="goodsDetail.areaType == 0 ? '不可发货地址' : '可发货地址'">
            <span style="width: 374px; display: inline-block">
              {{ goodsDetail.areaName ? goodsDetail.areaName : '暂无' }}
            </span>
          </a-descriptions-item>
        </a-descriptions>
        <div style="margin-top: 20px; color: var(--color-text-1); font-weight: 500; font-size: 16px">
          图文详情
        </div>
        <div style="margin-top: 12px" v-if="goodsDetail.content">
          <div v-html="goodsDetail.content"></div>
        </div>
        <div style="margin-top: 12px" v-else>当前商品介绍为空</div>
      </div>
    </a-drawer>
    <a-modal v-model:visible="posterShow" :footer="false" title-align="start" :title="codeUser == 1 ? '分享商城' : '分享商品'">
      <div v-if="posterLength > 0" style="display: flex; justify-content: center; margin: 20px 0px">
        <div style="width: 400px">
          <a-image style="width: 100%; height: 100%; text-align: center" :src="imgUrl" show-loader />
        </div>
      </div>
      <div style="display: flex; justify-content: center; margin: 20px 0px">
        <div
          style="background-color: #F2F3F5;width:400px; height: 120px;border-radius: 10px;padding: 15px;display: flex;justify-content: space-between;">
          <a-image style="width: 90px; height: 90px; text-align: center" :src="qrImg" show-loader />
          <div style="width: calc(100% - 110px);">
            <div>{{ codeUser == 1 ? '商城链接' : '下单链接' }}</div>
            <div style="white-space: pre-wrap;word-break: break-all;word-wrap: break-word;">{{ urlsa }}</div>
            <div>
              <a-button v-if="posterLength > 0" style="margin-right: 10px;" type="primary" size="mini"
                @click="downs">保存海报</a-button>
              <a-button type="primary" style="margin-right: 10px;" size="mini"
                @click="useCommon.copy(urlsa)">复制链接</a-button>
              <a-button type="primary" size="mini" @click="downQr">保存二维码</a-button>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 商品变更日志 -->
    <a-drawer :width="1210" title="商品日志" v-model:visible="productChangeLogShow" :mask-closable="false"
      title-align="start" :footer="false">
      <div style="padding: 20px;">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-input v-model="seachProductChangeForm.mallName" placeholder="请输入商品名称" allow-clear />
          </a-col>
          <a-col :span="6">
            <a-select class="width100" v-model="seachProductChangeForm.operators" multiple :max-tag-count="1"
              placeholder="请选择运营商" allow-clear>
              <a-option :value="0">中国移动</a-option>
              <a-option :value="1">中国联通</a-option>
              <a-option :value="2">中国电信</a-option>
              <a-option :value="3">中国广电</a-option>
            </a-select>
          </a-col>
          <a-col :span="6">
            <a-select class="width100" v-model="seachProductChangeForm.commissionRules" multiple :max-tag-count="1"
              placeholder="请选择佣金规则" allow-clear>
              <a-option :value="0">秒返</a-option>
              <a-option :value="1">次月底返</a-option>
              <a-option :value="2">月月返</a-option>
            </a-select>
          </a-col>
          <a-col :span="6">
            <a-button type="primary" @click="productChangeFn(1)">
              搜索
            </a-button>
          </a-col>
        </a-row>
        <a-table style="margin-top: 20px;" :columns="columns1" :pagination="false" :data="productChangeLogList">
          <template #columns>
            <a-table-column
              v-for="item of columns1"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'name'" #cell="{ record }">
                <div style="display: flex">
                    <a-image
                      style="width: 40px; height: 40px"
                      :src="reSetImage(record.mall.img[0])"
                      fit="contain"
                      alt=""
                      :preview="false"
                      @click="openImg(record.mall)"
                    />
                    <div style="margin-left: 10px; width: 170px">
                      <div style="line-height: 20px; font-size: 12px">{{ record.mall.name }}</div>
                      <div style="color: #86909c; line-height: 20px; font-size: 10px">{{
                        record.mall.shortIntroduce
                      }}</div>
                    </div>
                  </div>
              </template>
              <template v-if="item.key === 'mallId'" #cell="{ record }">
                <span>{{ record.mallId }}</span>
              </template>
              <template v-if="item.key === 'state'" #cell="{ record }">
                <a-tag color="green" v-if="record.type == 0">手动变更</a-tag>
                <a-tag color="blue" v-else-if="record.type == 1">系统轮询</a-tag>
                <a-tag color="gold" v-else-if="record.type == 2">渠道推送</a-tag>
                <a-tag color="red" v-else-if="record.state == 3">回收失败</a-tag>
                <a-tag color="red" v-else-if="record.state == 4">返佣失败</a-tag></template
              >
              <template v-if="item.key === 'addTime'" #cell="{ record }">
                <span>{{ record.addTime }}</span>
              </template>
              <template v-if="item.key === 'action'" #cell="{ record }">
                <a-space :size="2">
                  <a-button
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="openDetailProductChange(record.id)"
                    >详情</a-button
                  >
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <TableFooter :pagination="paginationProductChange" />
      </div>
    </a-drawer>
    <!-- 商品变更详情 -->
    <a-modal v-model:visible="productChangeDetailShow" width="80%" @before-close="productChangeClose"   title="变更详情" :mask-closable="false"
    title-align="start" :footer="false"> 
    <div class="changeBox">
      <div class="changeBefore">
        <div class="changeName">修改前</div>
        <div>
          <div class="changeTitle">{{ productChangeDetail.before.商品信息.categoryName }}</div>
          <div style="padding-left: 15px;">
            <div v-for="item in productChangeDetail.before.商品信息.fields" :key="item.fieldLabel">
             
              <div class="changeSpan" >{{ item.fieldLabel }}: <span :class="item.changed==true?'changeBeforeValue':''">{{ item.value }}</span> </div>
              
            </div>
          </div>
          <div class="changeTitle">{{ productChangeDetail.before.商品介绍.categoryName }}</div>
          <div style="padding-left: 15px;">
            <div v-for="item in productChangeDetail.before.商品介绍.fields" :key="item.fieldLabel">
              <div class="changeSpan" v-if="item.fieldLabel == '图文详情' || item.fieldLabel == '优惠详情'" >{{ item.fieldLabel }}: <span :class="item.changed==true?'changeBeforeValue':''"> <span style="padding-left: 75px;" v-html="item.value"></span> </span> </div>
              <div class="changeSpan" v-else-if="item.fieldLabel == '商品图片'" style=" display: flex;
  align-items: center;">{{ item.fieldLabel }}:   
                <a-image v-for="(items,index) in item.value"  :key="index"
                      style="width: 100px; height: 100px;overflow: hidden;margin-left: 5px;"
                      :src="reSetImage(items)"
                      alt=""
                    />  </div>
              <div class="changeSpan" v-else >{{ item.fieldLabel }}: <span :class="item.changed==true?'changeBeforeValue':''">{{ item.value }}</span> </div>
              
            </div>
          </div>
          <div class="changeTitle">{{ productChangeDetail.before.套餐信息.categoryName }}</div>
          <div style="padding-left: 15px;">
            <div  v-for="item in productChangeDetail.before.套餐信息.fields" :key="item.fieldLabel">
              <div class="changeSpan">{{ item.fieldLabel }}: <span :class="item.changed==true?'changeBeforeValue':''">{{ item.value }}</span> </div>
              
            </div>
          </div>
          <div class="changeTitle">{{ productChangeDetail.before.下单设置.categoryName }}</div>
          <div style="padding-left: 15px;">
            <div v-for="item in productChangeDetail.before.下单设置.fields" :key="item.fieldLabel">
              <div class="changeSpan">{{ item.fieldLabel }}: <span :class="item.changed==true?'changeBeforeValue':''">{{ item.value }}</span> </div>
            </div>
          </div>
          <div class="changeTitle">{{ productChangeDetail.before.佣金设置.categoryName }}</div>
          <div style="padding-left: 15px;">
            <div v-for="item in productChangeDetail.before.佣金设置.fields" :key="item.fieldLabel">
              <div class="changeSpan" v-if="item.fieldLabel == '月月返佣金'" >{{ item.fieldLabel }}: <span :class="item.changed==true?'changeBeforeValue':''">
                <span  v-if="item.value">
                  <div style="padding-left: 75px;" v-for="items in item.value" :key="items.month">在网第{{ items.month }}个月,佣金为{{ items.commission }}</div>
                </span>
              </span> </div>
              <div class="changeSpan" v-else>{{ item.fieldLabel }}: <span :class="item.changed==true?'changeBeforeValue':''">{{ item.value }}</span> </div>
              
            </div>
          </div>
        </div>
      </div>
      <div class="changeBefore">
        <div class="changeName1">修改后</div>
        <div>
          <div class="changeTitle">{{ productChangeDetail.after.商品信息.categoryName }}</div>
          <div style="padding-left: 15px;">
            <div v-for="item in productChangeDetail.after.商品信息.fields" :key="item.fieldLabel">
              <div class="changeSpan" >{{ item.fieldLabel }}: <span :class="item.changed==true?'changeBeforeValue1':''">{{ item.value }}</span> </div>
            </div>
          </div>
          <div class="changeTitle">{{ productChangeDetail.after.商品介绍.categoryName }}</div>
          <div style="padding-left: 15px;">
            <div v-for="item in productChangeDetail.after.商品介绍.fields" :key="item.fieldLabel">
              <div class="changeSpan" v-if="item.fieldLabel == '图文详情' || item.fieldLabel == '优惠详情'" >{{ item.fieldLabel }}: <span :class="item.changed==true?'changeBeforeValue1':''"> <span style="padding-left: 75px;" v-html="item.value"></span> </span> </div>
              <div class="changeSpan" v-else-if="item.fieldLabel == '商品图片'" style=" display: flex;
  align-items: center;">{{ item.fieldLabel }}:   
                <a-image v-for="(items,index) in item.value"  :key="index"
                      style="width: 100px; height: 100px;overflow: hidden;margin-left: 5px;"
                      :src="reSetImage(items)"
                      alt=""
                    />  </div>
              <div class="changeSpan" v-else >{{ item.fieldLabel }}: <span :class="item.changed==true?'changeBeforeValue1':''">{{ item.value }}</span> </div>
              
            </div>
          </div>
          <div class="changeTitle">{{ productChangeDetail.after.套餐信息.categoryName }}</div>
          <div style="padding-left: 15px;">
            <div  v-for="item in productChangeDetail.after.套餐信息.fields" :key="item.fieldLabel">
              <div class="changeSpan">{{ item.fieldLabel }}: <span :class="item.changed==true?'changeBeforeValue1':''">{{ item.value }}</span> </div>
              
            </div>
          </div>
          <div class="changeTitle">{{ productChangeDetail.after.下单设置.categoryName }}</div>
          <div style="padding-left: 15px;">
            <div v-for="item in productChangeDetail.after.下单设置.fields" :key="item.fieldLabel">
              <div class="changeSpan">{{ item.fieldLabel }}: <span :class="item.changed==true?'changeBeforeValue1':''">{{ item.value }}</span> </div>
            </div>
          </div>
          <div class="changeTitle">{{ productChangeDetail.after.佣金设置.categoryName }}</div>
          <div style="padding-left: 15px;">
            <div v-for="item in productChangeDetail.after.佣金设置.fields" :key="item.fieldLabel">
              <div class="changeSpan" v-if="item.fieldLabel == '月月返佣金'" >{{ item.fieldLabel }}: <span :class="item.changed==true?'changeBeforeValue1':''">
                <span  v-if="item.value">
                  <div style="padding-left: 75px;" v-for="items in item.value" :key="items.month">在网第{{ items.month }}个月,佣金为{{ items.commission }}</div>
                </span>
              </span> </div>
              <div class="changeSpan" v-else>{{ item.fieldLabel }}: <span :class="item.changed==true?'changeBeforeValue1':''">{{ item.value }}</span> </div>
              
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
  </div>
</template>
<script setup lang="ts">
import { formpost, get, post } from '@/api/http'
import { usePagination, useRowKey, useTable } from '@/hooks/table'
import { onMounted, reactive, ref } from 'vue'
import useCommonStore from '@/store/modules/common'
import { Message, Modal } from '@arco-design/web-vue'
import { qr } from '@/api/url'
import router from '@/router'
import { reSetImage } from "@/api/imageNiu"
//商品变更日志
const paginationProductChange = usePagination(productChangeFn)
const productChangeLoading = ref(false)
const productChangeLogShow = ref(false)
const productChangeLogList = ref([])
const productChangeDetail:any=ref({
  before:{
    商品信息:{},
    商品介绍:{},
    套餐信息:{},
    下单设置:{},
    佣金设置:{},
  },
  after:{
    商品信息:{},
    商品介绍:{},
    套餐信息:{},
    下单设置:{},
    佣金设置:{},
  }
  
})
function productChangeClose(){
  productChangeDetail.value={
    before:{
    商品信息:{},
    商品介绍:{},
    套餐信息:{},
    下单设置:{},
    佣金设置:{},
  },
  after:{
    商品信息:{},
    商品介绍:{},
    套餐信息:{},
    下单设置:{},
    佣金设置:{},
  }
  }
  productChangeDetailShow.value=false
}
const seachProductChangeForm: any = ref({
  mallName: "",
  operators: [],
  commissionRules: [],

})
const columns1 = [
{
      title: '商品ID',
      key: 'mallId',
      width:150,
    },
    {
      title: '商品名称',
      key: 'name',
      width:220,
    },
  
    {
      title: '修改类型',
      key: 'state',
      width:150,
    },
    {
      title: '修改时间',
      key: 'addTime',
      width:220,
    },
    {
      title: '操作',
      key: 'action',
      width:150,
    },
  ]

function openProductChangeLog() {
  productChangeFn(1)
  productChangeLogShow.value = true
}

function openDetailProductChange(val:any){
  get({ url: '/app/mall/change/log/info',data:{id:val} }).then((res) => {
    if (res.data) {
      
      productChangeDetail.value = res.data
      productChangeDetailShow.value=true
    }
  })
}

const productChangeDetailShow=ref(false)

function productChangeFn(val?: any) {
  productChangeLoading.value = true
  if (val) {
    paginationProductChange.page = val
  }
  formpost({
    url: `/app/mall/change/log/list?page=${paginationProductChange.page}&size=${paginationProductChange.pageSize}`,
    data: {
      ...seachProductChangeForm.value,
      operators: seachProductChangeForm.value.operators.toString(),
      commissionRules: seachProductChangeForm.value.commissionRules.toString(),

    },
  }).then((res: any) => {
    productChangeLoading.value = false
    productChangeLogList.value = res.data.list
    paginationProductChange.setTotalSize((res.data as any).totalSize)
  })
}


const domainName = ref(window.location.protocol + '//' + window.location.host)
//Logo上传
const onError = (fileItem: any) => {
  Message.error(fileItem.response.msg)
}
//云端储存
const cloudForm = ref({
  coding: '',
  url: '',
  name: '',
  remarks: '',
  state: 1,
  params: [],
})
const cloudRef = ref()
const cloudTypeArray: any = ref([])
function cloudTypeFn() {
  get({ url: '/app/library/channel/getCodings' }).then((res) => {
    if (res.data) {
      cloudTypeArray.value = res.data
    }
  })
}
function cloudTypeChange(val: any) {
  cloudForm.value.coding = val
  cloudTypeArray.value.forEach((item: any) => {
    if (item.coding == val) {
      cloudForm.value.params = item.params
    }
  })
}
function cloudGet() {
  cloudTypeFn()
  get({ url: '/app/library/channel/get' }).then((res) => {
    if (res.data) {
      cloudForm.value = res.data
    }
  })
}
function cloudSet() {
  cloudRef.value.validate((error: any) => {
    if (!error) {
      post({
        url: '/app/library/channel/add',
        data: {
          ...cloudForm.value,
        },
      }).then((res) => {
        if (res.code == 0) {
          Message.success(res.msg)
          cloudGet()
        }
      })
    }
  })
}
const loadingList = ref(false)
function onChange(page: number) {
  doRefresh(page)
}
function onPageSizeChange(pageSize: number) {
  pagination.pageSize = pageSize
  doRefresh()
}
//分享商品
const posterShow = ref(false)
function downQr() {
  // 主要是为了名字不重复
  var name = new Date().getTime()
  downloadIamge(qrImg.value, name)
}
//修改商品状态
function changeState(item: any) {
  goodsDetailVisible.value = false
  Modal.warning({
    title: '操作确认',
    content: '确定要改变商品状态吗？',
    cancelText: '取消',
    titleAlign: 'start',
    hideCancel: false,
    okText: '确定',
    onOk() {
      get({
        url: '/app/mall/update/state',
        data: () => {
          return {
            state: item.state,
            id: item.id,
          }
        },
      }).then((res) => {
        if (res.code == 0) {
          Message.success(res.msg)
          doRefresh()
        } else {
          Message.error(res.msg)
        }
      })
    },
    onCancel() {
      doRefresh()
    },
  })
}
//商品详情
const goodsDetailVisible = ref(false)
const goodsDetail: any = ref({})
const showDetail = (item: any) => {
  console.log(item)
  goodsDetailVisible.value = true
  get({
        url: '/app/mall/info',
        data: { id: item.id },
      }).then((res: any) => {
        res.data.imgs = res.data.img[0]
        goodsDetail.value = res.data
      })
}
const detailCloseFn = () => {
  goodsDetailVisible.value = false
  doRefresh()
}
//展示图片
const imgShow = ref(false)
const imgArray: any = ref([])
function openImg(val: any) {
  imgArray.value = JSON.parse(JSON.stringify(val.img))
  console.log(val.img)
  imgArray.value.forEach((item: any, index: any) => {
    imgArray.value[index] = reSetImage(item)
  })
  imgShow.value = true
}
const showSucaiKu = ref(false)
function clickSucai() {
  showSucaiKu.value = true
}
//切换渠道系统
const encodingFn = (val: any) => {
  intimidateInfo.value.coding = val
  intimidateInfo.value.parameters = []
  fastMailList.value.forEach((item: any) => {
    console.log(item)
    if (item.coding == val) {
      intimidateInfo.value.parameters = item.platformParams
    }
  })
}
//自动打单
const intimidateShow = ref(false)
const intimidateLoad = ref(false)
const intimidateList: any = ref([])
const intimidateTableList: any = ref([
  {
    title: '渠道名称',
    key: 'name',
    dataIndex: 'name',
    checked: true,
    width: 170,
  },
  {
    title: '创建时间',
    key: 'addTime',
    dataIndex: 'addTime',
    checked: true,
    width: 223,
  },
  {
    title: '操作',
    key: 'actions',
    fixed: 'right',
    dataIndex: 'actions',
    width: 176,
    align: 'left',
    checked: true,
  },
])
const intimidateRef = ref()
const fastMailList: any = ref([])
const intimidateInfoShow = ref(false)
const intimidateInfoTitle = ref('新建渠道')
function openIntimidate() {
  intimidateListFn()
  intimidateShow.value = true
}

function openIntimidateInfo() {
  useCommon.expressChannel().then((res) => {
    fastMailList.value = res.data
    intimidateInfo.value.parameters = res.data[0].platformParams
    intimidateInfo.value.coding = res.data[0].coding
    intimidateInfo.value.name = ''
    intimidateInfoTitle.value = '新建渠道'
    intimidateInfoShow.value = true
  })
}

const intimidateInfo: any = ref({
  name: '',
  coding: '',
  parameters: [],
  remarks: '',
})

function intimidateListFn() {
  intimidateLoad.value = true
  get({
    url: '/app/mall/express/channel/get/list',
  })
    .then((res) => {
      if (res.code == 0) {
        intimidateLoad.value = false
        intimidateList.value = res.data
      } else {
        intimidateLoad.value = false
        Message.error(res.msg)
      }
    })
    .catch(console.log)
}

function handleCancelIntimidate() {
  intimidateInfo.value.id = null
  intimidateInfo.value.parameters = []
  intimidateInfo.value.name = ''
  intimidateInfo.value.remarks = ''
  intimidateRef.value?.resetFields()
  intimidateListFn()
  intimidateInfoShow.value = false

}

function handleBeforeIntimidate() {
  intimidateRef.value?.validate().then((error: any) => {
    if (!error) {
      if (intimidateInfo.value.id) {
        post({
          url: '/app/mall/express/channel/update',
          data: () => {
            return {
              ...intimidateInfo.value,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              handleCancelIntimidate()
              intimidateListFn()
            } else {
              Message.error(res.msg)
            }
          })
          .catch(console.log)
      } else {
        post({
          url: '/app/mall/express/channel/add',
          data: () => {
            return {
              ...intimidateInfo.value,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              handleCancelIntimidate()
              intimidateListFn()
            } else {
              Message.error(res.msg)
            }
          })
          .catch(console.log)
      }
    }
  })
}

function openUpdateIntimidate(val: any) {
  intimidateInfoTitle.value = '编辑渠道'
  useCommon.expressChannel().then((res) => {
    res.data
      .filter((item: any) => item.coding === val.coding)
      .forEach((item: any) => {
        // 创建平台参数映射表以快速查找
        const platformParamMap = new Map<string, any>(
          item.platformParams.map((param: any) => [param.name, param])
        );

        // 重构参数处理逻辑
        val.parameters = val.parameters.map((param: any) => {
          const matchedPlatformParam = platformParamMap.get(param.name);
          return matchedPlatformParam
            ? { // 合并保留关键字段
              key: param.key,
              name: param.name,
              value: param.value,
              parameterType: matchedPlatformParam.parameterType,
              required: matchedPlatformParam.required
            }
            : param; // 无匹配项保持原参数
        });
      });
    fastMailList.value = res.data
  })
  intimidateInfo.value = val
  intimidateInfoShow.value = true
}
function openDeleIntimidate(val: any) {
  Modal.warning({
    title: '操作确认',
    content: '确定要删除此渠道吗？',
    cancelText: '取消',
    titleAlign: 'start',
    hideCancel: false,
    okText: '删除',
    onOk: () => {
      get({
        url: '/app/mall/express/channel/delete',
        data: () => {
          return {
            id: val.id,
          }
        },
      })
        .then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            intimidateListFn()
          } else {
            Message.error(res.msg)
          }
        })
        .catch(console.log)
    },
  })
}

const useCommon = useCommonStore()
const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  onlyCurrent: false,
})
const types: any = ref(0)
const handleChange = (_data: any, extra: any) => {
  console.log(_data)
  console.log(extra.dragTarget.id)
  var sorts: any = []
  _data.forEach((item, index) => {
    sorts.push({
      id: item.id,
      sort: index,
    })
    // item.sort = index
  })
  post({
    url: '/app/mall/class/sort',
    data: sorts,
  }).then((res) => {
    if (res.code == 0) {
      Message.success(res.msg)
      classListFn()
    } else {
      Message.error(res.msg)
    }
  })
}
//分润设置
const diviSettingShow = ref(false)
const diviSettingForm: any = ref({
  open: false,
  profit: '',
  profitType:0,
})
const diviSettingRef = ref()
//获取分润设置
function getDiviSettingForm() {
  get({
    url: '/app/mall/profit/sharing/get',
  }).then((res) => {
    if (res.code == 0) {
      if (res.data) {
        diviSettingForm.value = res.data
      }
    }
  })
  diviSettingShow.value = true
}
//分润设置关闭前回调
function closeDiviSetting() {
  diviSettingRef.value?.resetFields()
  diviSettingShow.value = false
}
const loadingls = ref(false)
//保存分润设置
function setDiviSettingForm() {
  loadingls.value = true
  post({
    url: '/app/mall/profit/sharing/set',
    data: () => {
      return {
        ...diviSettingForm.value,
      }
    },
  }).then((res) => {
    if (res.code == 0) {
      loadingls.value = false
      Message.success(res.msg)
      closeDiviSetting()
      doRefresh()
    }
  })
}
//地区数组
const regionList: any = ref([])
const mathArray: any = ref([])
//通用库存
const comStockVisible = ref(false)
const state = ref(0)
function openTku(item: any, num: any) {
  types.value = num
  if (num == 1) {
    stockInfo.value = {
      generalStock: '',
      mallId: item.id,
    }
  } else {
    stockInfo.value = {
      userId: item.id,
      generalStock: '',
    }
  }
  state.value = 0
  comStockVisible.value = true
}
function handleCancelComStock() {
  stockInfo.value = {
    userId: '',
    generalStock: '',
  }
  state.value = 0
  comStockVisible.value = false
}
function handleBeforeComStock() {
  comStockRef.value?.validate().then((error: any) => {
    if (!error) {
      if (types.value == 0) {
        post({
          url: '/app/mall/stock/pay?isGeneral=' + true,
          data: {
            userId: stockInfo.value.userId,
            generalStock:
              state.value == 1
                ? Number('-' + stockInfo.value.generalStock)
                : stockInfo.value.generalStock,
          },
        }).then((res: any) => {
          if (res.code == 0) {
            Message.success(res.msg)
            handleCancelComStock()
            stockListFn()
          }
        })
      } else {
        post({
          url: '/app/mall/stock/pay?isGeneral=' + true,
          data: {
            userId: mallStockForm.value.userId,
            generalStock: mallStockForm.value.stock,
            mallMallStockList: [
              {
                mallId: stockInfo.value.mallId,
                mallStock:
                  state.value == 1
                    ? Number('-' + stockInfo.value.generalStock)
                    : stockInfo.value.generalStock,
              },
            ],
          },
        }).then((res: any) => {
          if (res.code == 0) {
            Message.success(res.msg)
            handleCancelComStock()
            mallStockListFn()
          }
        })
      }
    }
  })
}
const comStockRef = ref()

//辅助计算
function mathProfit() {
  mathArray.value = []
  if (profitNum.value == undefined || profitNum.value == 0 || profitNum.value == '') return false
  goodProfitList.value.forEach((item: any) => {
    item.mallUser = {
      cost: Math.floor(item.price * (profitNum.value / 100) * 100) / 100,
      price: item.price,
    }
    mathArray.value.push({
      cost: Math.floor(item.price * (profitNum.value / 100) * 100) / 100,
      price: item.price,
      mallId: item.id,
    })
  })
}
//批量分润
function allProfit() {
  if (mathArray.value.length > 0) {
    post({
      url: '/app/mall/profit/sharing?userId=' + goodProfitInfo.value.userId,
      data: mathArray.value,
    })
      .then((res) => {
        if (res.code == 0) {
          Message.success(res.msg)
          goodProfitFN()
          mathArray.value = []
          profitVisible.value = false
        } else {
          Message.error(res.msg)
        }
      })
      .catch(console.log)
  } else {
    Message.error('请先输入比例进行辅助计算后，再执行此操作')
  }
}
//编辑分润
const profitVisible = ref(false)
const profitRef = ref()
const profitInfo = ref({
  mallId: '',
  cost: '',
  price: '',
})
function openProfit(val: any) {
  if (val.mallUser) {
    profitInfo.value.cost = val.mallUser.cost
    profitInfo.value.price = val.mallUser.price
    profitInfo.value.mallId = val.id
  } else {
    profitInfo.value.cost = val.cost
    profitInfo.value.price = val.price
    profitInfo.value.mallId = val.id
  }
  profitVisible.value = true
}
function handleCancelProfit() {
  mathArray.value = []
  profitVisible.value = false
}
function handleBeforeProfit() {
  profitRef.value?.validate().then((error: any) => {
    if (!error) {
      post({
        url: '/app/mall/profit/sharing?userId=' + goodProfitInfo.value.userId,
        data: [profitInfo.value],
      })
        .then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            goodProfitFN()
            mathArray.value = []
            profitVisible.value = false
          } else {
            Message.error(res.msg)
          }
        })
        .catch(console.log)
    }
  })
}
//商品分润
const paginationGoodProfit = usePagination(goodProfitFN)
const goodProfitVisible = ref(false)
const goodProfitLoading = ref(false)
const goodProfitList = ref([])
const profitNum = ref('')
const goodProfitInfo = ref({
  userId: '',
  classId: '',
  mallId: '',
})
function openGoodProfit(val: any) {
  goodProfitInfo.value.userId = val.id
  mathArray.value = []
  profitNum.value = ''
  classListFn()
  goodAllListFn()
  goodProfitFN(1)
  goodProfitVisible.value = true
}
function goodProfitFN(val?: any) {
  goodProfitLoading.value = true
  if (val) {
    paginationGoodProfit.page = val
  }
  get({
    url: '/app/mall/profit/sharing/list',
    data: {
      page: paginationGoodProfit.page,
      size: paginationGoodProfit.pageSize,

      ...goodProfitInfo.value,
    },
  }).then((res: any) => {
    goodProfitLoading.value = false
    goodProfitList.value = res.data.list
    paginationGoodProfit.setTotalSize((res.data as any).totalSize)
  })
}
const goodProfitTableList = ref([
  {
    title: '商品名称',
    key: 'name',
    dataIndex: 'name',
    checked: true,
    width: 160,
  },
  {
    title: '商品成本',
    key: 'cost',
    dataIndex: 'cost',
    checked: true,
    width: 100,
  },
  {
    title: '商品售价',
    key: 'price',
    dataIndex: 'price',
    checked: true,
    width: 100,
  },
  {
    title: '客户成本',
    key: 'mallCost',
    dataIndex: 'mallCost',
    checked: true,
    width: 100,
  },
  {
    title: '客户售价',
    key: 'mallPrice',
    dataIndex: 'mallPrice',
    checked: true,
    width: 100,
  },
  {
    title: '我的利润',
    key: 'mallProfit',
    dataIndex: 'mallProfit',
    checked: true,
    width: 100,
  },
  {
    title: '操作',
    key: 'actions',
    fixed: 'right',
    dataIndex: 'actions',
    width: 80,
    align: 'left',
    checked: true,
  },
])
//商城分润
const paginationUser = usePagination(mallUserFn)
const userVisible = ref(false)
const userLoading = ref(false)
const userList = ref([])
const userInfo: any = ref({
  userName: '',
  grade: '',
})
function openUser() {
  paginationUser.showSizePicker = false
  mallUserFn(1)
  userVisible.value = true
}
function changeUser() {
  mallUserFn(1)
}
function mallUserFn(val?: any) {
  userLoading.value = true
  if (val) {
    paginationUser.page = val
  }
  get({
    url: '/app/mall/get/user/list',
    data: {
      page: paginationUser.page,
      size: paginationUser.pageSize,
      ...userInfo.value,
    },
  }).then((res: any) => {
    userLoading.value = false
    userList.value = res.data.list
    paginationUser.setTotalSize((res.data as any).totalSize)
  })
}
const userTableList = ref([
  {
    title: '客户ID',
    key: 'id',
    dataIndex: 'id',
    checked: true,
    width: 160,
  },
  {
    title: '客户账号',
    key: 'userName',
    dataIndex: 'userName',
    checked: true,
    width: 160,
  },
  {
    title: '操作',
    key: 'actions',
    fixed: 'right',
    dataIndex: 'actions',
    width: 176,
    align: 'left',
    checked: true,
  },
])
//链接地址
const linkShow = ref(false)
const imgUrl = ref('')
const urlsa = ref('')
const codeUser = ref(0)
const posterLength = ref(0)
const qrImg = ref('')
function openOneCodeEr(val1: any, val?: any) {
  codeUser.value = val1
  if (val1 == 1) {
    get({
      url: '/app/mall/setting/get',
    }).then((res: any) => {
      if (res.code == 0) {
        if (res.data) {
          get({
            url: '/app/poster/get/generation/info',
            data: {
              type: 1,
            },
          }).then((resA: any) => {
            if (resA.code == 0) {
              posterLength.value = resA.data.length
              let ass = ''
              if (resA.data.length > 0) {
                ass = resA.data[0].id
              } else {
                ass = ''
              }
              qrImg.value =
                domainName.value +
                qr +
                '?content=' +
                encodeURIComponent(
                  domainName.value + '/wap/pages/mall/mall?mallCode=' + res.data.code
                )
              urlsa.value = domainName.value + '/wap/pages/mall/mall?mallCode=' + res.data.code
              imgUrl.value =
                domainName.value +
                '/app/poster/generation?qrCodeUrl=' +
                encodeURIComponent(
                  domainName.value + '/wap/pages/mall/mall?mallCode=' + res.data.code
                ) +
                '&type=' +
                1 +
                '&productId=' +
                '&posterId=' + ass
              posterShow.value = true
            }
          })
        } else {
          Message.error('请先添加商城设置后，在尝试此操作')
        }
      }
    })
  } else {
    if (val.state == false) {
      Message.error('此商品已下架')
    } else {
      get({
        url: '/app/mall/setting/get',
      }).then((res: any) => {
        if (res.code == 0) {
          if (res.data) {
            get({
              url: '/app/poster/get/generation/info',
              data: {
                type: 0,
              },
            }).then((resA: any) => {
              if (resA.code == 0) {
                posterLength.value = resA.data.length
                qrImg.value =
                  domainName.value +
                  qr +
                  '?content=' +
                  encodeURIComponent(
                    domainName.value +
                    '/wap/pages/mall/detail?id=' +
                    val.id +
                    '&mallCode=' +
                    res.data.code
                  )
                urlsa.value =
                  domainName.value +
                  '/wap/pages/mall/detail?id=' +
                  val.id +
                  '&mallCode=' +
                  res.data.code
                imgUrl.value =
                  domainName.value +
                  '/app/poster/generation?qrCodeUrl=' +
                  encodeURIComponent(
                    domainName.value +
                    '/wap/pages/mall/detail?id=' +
                    val.id +
                    '&mallCode=' +
                    res.data.code
                  ) +
                  '&type=' +
                  0 +
                  '&productId=' +
                  val.id +
                  '&posterId='

                posterShow.value = true
              }
            })
          } else {
            Message.error('请先添加商城设置后，在尝试此操作')
          }
        }
      })
    }
  }
}
//下载图片
function downloadIamge(imgsrc: any, name: any) {
  //下载图片地址和图片名
  var image = new Image()
  // 解决跨域 Canvas 污染问题
  image.setAttribute('crossOrigin', 'anonymous')
  image.onload = function () {
    var canvas = document.createElement('canvas')
    canvas.width = image.width
    canvas.height = image.height
    var context = canvas.getContext('2d')
    context.drawImage(image, 0, 0, image.width, image.height)
    var url = canvas.toDataURL('image/png') //得到图片的base64编码数据
    var a = document.createElement('a') // 生成一个a元素
    var event = new MouseEvent('click') // 创建一个单击事件
    a.download = name || 'photo' // 设置图片名称
    a.href = url // 将生成的URL设置为a.href属性
    a.dispatchEvent(event) // 触发a的单击事件
  }
  image.src = imgsrc
}
// 改downs这个函数就行，downloadIamge（‘图片下载地址’，图片名字）
function downs() {
  // 主要是为了名字不重复
  var name = new Date().getTime()
  downloadIamge(imgUrl.value, name)
}
//商城设置
const position = ref('mall')
const mallSysVisible = ref(false)
const mallSysRef = ref()
const imgIndex = ref(0)
const mallSysInfo: any = ref({
  priorityStock: false,
  logo: '',
  /**
   * 商城名称
   */
  name: '',
  /**
   * 客服类型 0图片 1链接
   */
  customerServiceType: 0,
  /**
   * 客服类型为0是图片地址
   */
  customerServiceImg: '',
  /**
   * 客服微信或者客服链接
   */
  customerService: '',
  /**
   * 代理下架商品权限
   * 下架功能如果关闭，代理商将不能下架商品
   */
  closePermissions: true,
  /**
   * 管理分享链接code，唯一标识
   */
  code: '',
  /**
   * 轮播图
   */
  banner: [
    {
      img: '',
      link: '',
    },
  ],
})
function handleCancelMallSys() {
  mallSysInfo.value = {
    priorityStock: false,
    logo: '',
    /**
     * 商城名称
     */
    name: '',
    /**
     * 客服类型 0图片 1链接
     */
    customerServiceType: 0,
    /**
     * 客服类型为0是图片地址
     */
    customerServiceImg: '',
    /**
     * 客服微信或者客服链接
     */
    customerService: '',
    /**
     * 代理下架商品权限
     * 下架功能如果关闭，代理商将不能下架商品
     */
    closePermissions: true,
    /**
     * 管理分享链接code，唯一标识
     */
    code: '',
    /**
     * 轮播图
     */
    banner: [
      {
        img: '',
        link: '',
      },
    ],
  }
  mallSysVisible.value = false
}
function handleBeforeMallSys() {
  mallSysRef.value?.validate().then((error: any) => {
    if (!error) {
      post({
        url: '/app/mall/setting/set',
        data: () => {
          return {
            ...mallSysInfo.value,
          }
        },
      })
        .then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            handleCancelMallSys()
          } else {
            Message.error(res.msg)
          }
        })
        .catch(console.log)
    }
  })
}
const addItemMall = () => {
  mallSysInfo.value.banner.push({
    img: '',
    link: '',
  })
}
const handleDeleteMall = (index: any) => {
  if (mallSysInfo.value.banner == 1) {
    Message.error('最少保留一个')
  } else {
    mallSysInfo.value.banner.splice(index, 1)
  }
}
function openMallSys() {
  get({
    url: '/app/mall/setting/get',
  }).then((res: any) => {
    if (res.code == 0) {
      if (res.data) {
        if (res.data.banner.length > 0) {
          mallSysInfo.value = res.data
        } else {
          res.data.banner = [{ img: '', link: '' }]
          mallSysInfo.value = res.data
        }
      }
      mallSysVisible.value = true
    }
  })
  cloudGet()
}
//客户库存
const paginationStock = usePagination(stockListFn)
const stockVisible = ref(false)
const stockList = ref([])
const stockLoading = ref(false)
const stockInfo: any = ref({})
const type0Num = ref('')
const selectedKeys = ref([])
function openStock() {
  stockListFn(1)
  stockVisible.value = true
}

function stockListFn(val?: any) {
  stockLoading.value = true
  if (val) {
    paginationStock.page = val
  }
  get({
    url: '/app/mall/general/stock/list',
    data: {
      page: paginationStock.page,
      size: paginationStock.pageSize,
    },
  }).then((res: any) => {
    stockLoading.value = false
    res.data.list.forEach((item: any) => {
      item.showInputs = false
      if (!item.mallGeneralStock) {
        item.mallGeneralStock = {
          generalStock: 0,
        }
      }
    })
    stockList.value = res.data.list
    paginationStock.setTotalSize((res.data as any).totalSize)
  })
}
const stockTableList = ref([
  {
    title: '客户账号',
    key: 'userName',
    dataIndex: 'userName',
    checked: true,
    width: 160,
  },
  {
    title: '通用库存',
    key: 'generalStock',
    dataIndex: 'generalStock',
    checked: true,
    width: 120,
  },
  {
    title: '商品库存',
    key: 'mallStock',
    dataIndex: 'mallStock',
    checked: true,
    width: 120,
  },
])
//商品库存
const paginationMallStock = usePagination(mallStockListFn)
const mallStockVisible = ref(false)
const mallStockList = ref([])
const mallStockLoading = ref(false)
const mallStockForm = ref({
  classId: '',
  mallId: '',
  userId: '',
  stock: '',
})
function changeStockSeach() {
  mallStockListFn(1)
}
function mallStockClose() {
  stockListFn()
  mallStockVisible.value = false
}
function allStockFn() {
  console.log(selectedKeys.value)
  if (selectedKeys.value.length > 0) {
    let a: any = []
    selectedKeys.value.forEach((item: any) => {
      a.push({
        mallId: item,
        mallStock: type0Num.value,
      })
    })
    post({
      url: '/app/mall/stock/pay?isGeneral=' + false,
      data: {
        userId: mallStockForm.value.userId,
        generalStock: mallStockForm.value.stock,
        mallMallStockList: a,
      },
    }).then((res: any) => {
      if (res.code == 0) {
        Message.success(res.msg)
        mallStockListFn()
      } else {
        mallStockListFn()
      }
    })
  } else {
    Message.error('请先选择充值商品')
  }
}
function openMallStock(val: any) {
  mallStockForm.value.userId = val.id
  mallStockForm.value.stock = val.mallGeneralStock.generalStock
  classListFn()
  goodAllListFn()
  mallStockListFn(1)
  mallStockVisible.value = true
}
const goodAllList: any = ref([])
function goodAllListFn() {
  useCommon.mallFn().then((res) => {
    goodAllList.value = res.data
  })
}
function mallStockListFn(val?: any) {
  mallStockLoading.value = true
  if (val) {
    paginationMallStock.page = val
  }
  get({
    url: '/app/mall/mall/stock/list',
    data: {
      page: paginationMallStock.page,
      size: paginationMallStock.pageSize,
      ...mallStockForm.value,
    },
  }).then((res: any) => {
    mallStockLoading.value = false
    res.data.list.forEach((item: any) => {
      item.showInputs = false
      if (!item.mallStock) {
        item.mallStock = 0
      }
    })
    mallStockList.value = res.data.list
    paginationMallStock.setTotalSize((res.data as any).totalSize)
  })
}
const mallStockTableList = ref([
  {
    title: '商品ID',
    key: 'id',
    dataIndex: 'id',
    checked: true,
    width: 148,
  },
  {
    title: '商品名称',
    key: 'name',
    dataIndex: 'name',
    checked: true,
    width: 290,
  },
  {
    title: '库存数量',
    key: 'stock',
    dataIndex: 'stock',
    checked: true,
    width: 170,
  },
  {
    title: '充值数量',
    key: 'mallStock',
    dataIndex: 'mallStock',
    checked: true,
    width: 170,
  },
])
//运费模板
const freightVisible = ref(false)
const freightInfoTitle = ref('新建运费模板')
const freightPop = ref(false)
const freightLoading = ref(false)
const freightList: any = ref([])
const freightRef = ref()
const freightInfo: any = ref({
  name: '',
  list: [
    {
      code: '',
      postFee: '',
    },
  ],
})
function openFreight() {
  freightVisible.value = true
  freightListFn()
}
function handleCancelFreight() {
  freightInfo.value.id = null
  freightInfo.value.list = [
    {
      code: '',
      postFee: '',
    },
  ]
  freightRef.value?.resetFields()
  freightPop.value = false
}
function addFreight() {
  freightInfoTitle.value = '新建运费模板'
  getDistrictsList(2)
  freightPop.value = true
}
function getSubCodes(codes, regions) {
  const subCodes = [];
  for (const region of regions) {
    if (codes.includes(region.code)) {
      if (region.children && region.children.length > 0) {
        for (const child of region.children) {
          subCodes.push(child.code);
        }
      } else {
        // 如果没有子节点，认为是直辖市，添加自身 code
        subCodes.push(region.code);
      }
    }
  }

  return subCodes;
}
function handleBeforeFreight() {
  freightRef.value?.validate().then((error: any) => {
    if (!error) {
      let arrayList: any = []
      console.log(freightInfo.value.list)
      freightInfo.value.list.forEach((item): any => {
        item.codes = getSubCodes(item.code, regionList.value)
      })
      console.log(arrayList)
      // transformArray(freightInfo.value.list)
      if (freightInfo.value.id) {
        post({
          url: '/app/mall/post/fee/template/update',
          data: () => {
            return {
              ...freightInfo.value,
              list: transformArray(freightInfo.value.list),
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              handleCancelFreight()
              freightListFn()
            } else {
              Message.error(res.msg)
            }
          })
          .catch(console.log)
      } else {
        post({
          url: '/app/mall/post/fee/template/insert',
          data: () => {
            return {
              ...freightInfo.value,
              list: transformArray(freightInfo.value.list),
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              handleCancelFreight()
              freightListFn()
            } else {
              Message.error(res.msg)
            }
          })
          .catch(console.log)
      }
    }
  })
}
function openUpdateFreight(val: any) {
  freightInfoTitle.value = '编辑运费模板'
  getDistrictsList(2)
  freightInfo.value = JSON.parse(JSON.stringify(val))
  freightInfo.value.list = findSameAgeStudents(freightInfo.value.list)
  freightPop.value = true
}
function openDeleFreight(val: any) {
  Modal.warning({
    title: '操作确认',
    content: '确定要删除此模板吗？',
    cancelText: '取消',
    titleAlign: 'start',
    hideCancel: false,
    okText: '删除',
    onOk: () => {
      get({
        url: '/app/mall/post/fee/template/delete',
        data: () => {
          return {
            id: val.id,
          }
        },
      })
        .then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            freightListFn()
          } else {
            Message.error(res.msg)
          }
        })
        .catch(console.log)
    },
  })
}
function freightListFn() {
  freightLoading.value = true
  get({
    url: '/app/mall/post/fee/template/get/list',
  }).then((res: any) => {
    freightLoading.value = false
    freightList.value = res.data
  })
}
const freightTableList = ref([
  {
    title: '模板名称',
    key: 'name',
    dataIndex: 'name',
    checked: true,
    width: 170,
  },
  {
    title: '创建时间',
    key: 'addTime',
    dataIndex: 'addTime',
    checked: true,
    width: 223,
  },
  {
    title: '操作',
    key: 'actions',
    fixed: 'right',
    dataIndex: 'actions',
    width: 176,
    align: 'left',
    checked: true,
  },
])

const addItem = () => {
  freightInfo.value.list.push({
    code: '',
    postFee: '',
  })
}
const handleDelete = (index: any) => {
  freightInfo.value.list.splice(index, 1)
}
//处理获取的数据
function findSameAgeStudents(studentsArray: any) {
  let result: any = []
  let ageMap: any = {}

  // 遍历数组，将同学按年龄分组存到ageMap中
  for (let i = 0; i < studentsArray.length; i++) {
    let student = studentsArray[i]
    let age = student.postFee
    if (!ageMap[age]) {
      ageMap[age] = []
    }
    ageMap[age].push(student.code)
  }

  // 遍历ageMap，将年龄和对应的同学名字组成对象放入结果数组
  for (let age in ageMap) {
    if (ageMap.hasOwnProperty(age)) {
      result.push({
        postFee: parseInt(age),
        code: ageMap[age],
      })
    }
  }

  return result
}
//处理传到后端的数据
function transformArray(inputArray: any) {
  let outputArray = []

  for (let i = 0; i < inputArray.length; i++) {
    let item = inputArray[i]
    let postFee = item.postFee
    let code = item.codes
    for (let j = 0; j < code.length; j++) {
      let name = code[j]
      outputArray.push({ postFee: postFee, code: name })
    }
  }

  return outputArray
}

//设置分类
const classInfoTitle = ref('新建分类')
const classPop = ref(false)
const classRef = ref()
const classInfo: any = ref({
  name: '',
})
function handleCancelClass() {
  classInfo.value.id = null
  classRef.value?.resetFields()
  classPop.value = false
}
function handleBeforeClass() {
  classRef.value?.validate().then((error: any) => {
    if (!error) {
      if (classInfo.value.id) {
        get({
          url: '/app/mall/class/update',
          data: () => {
            return {
              ...classInfo.value,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              handleCancelClass()
              classListFn()
            } else {
              Message.error(res.msg)
            }
          })
          .catch(console.log)
      } else {
        get({
          url: '/app/mall/class/insert',
          data: () => {
            return {
              ...classInfo.value,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              handleCancelClass()
              classListFn()
            } else {
              Message.error(res.msg)
            }
          })
          .catch(console.log)
      }
    }
  })
}
function openUpdateClass(val: any) {
  classInfoTitle.value = '编辑分类'
  classInfo.value = JSON.parse(JSON.stringify(val))
  classPop.value = true
}
function openDeleClass(val: any) {
  Modal.warning({
    title: '操作确认',
    content: '确定要删除此分类吗？',
    cancelText: '取消',
    titleAlign: 'start',
    hideCancel: false,
    okText: '删除',
    onOk: () => {
      get({
        url: '/app/mall/class/delete',
        data: () => {
          return {
            id: val.id,
          }
        },
      })
        .then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            classListFn()
          } else {
            Message.error(res.msg)
          }
        })
        .catch(console.log)
    },
  })
}
const classList: any = ref([])
const classTableList = ref([
  {
    title: '分类名称',
    key: 'name',
    dataIndex: 'name',
    checked: true,
    width: 170,
  },
  {
    title: '创建时间',
    key: 'addTime',
    dataIndex: 'addTime',
    checked: true,
    width: 223,
  },
  {
    title: '操作',
    key: 'actions',
    fixed: 'right',
    dataIndex: 'actions',
    width: 150,
    align: 'left',
    checked: true,
  },
])
const classVisible = ref(false)
const classLoading = ref(false)
function openClass() {
  classLoading.value = true
  classVisible.value = true
  classListFn()
}
function classListFn() {
  classLoading.value = true
  get({
    url: '/app/mall/class/list',
  }).then((res: any) => {
    classLoading.value = false
    classList.value = res.data
  })
}
function addClass() {
  classInfoTitle.value = '新建分类'
  classPop.value = true
}
//商品详情
const goodVisible = ref(false)
const goodTitle = ref('新建商品')
const goodRef = ref()
const goodInfo: any = ref({
  /**
   * 分类ID
   */
  classId: '',
  operator: [],
  seriesId: '',
  sales: '',
  /**
   * 商品名称
   */
  name: '',
  /**
   * 成本
   */
  cost: 0,
  /**
   * 售价
   */
  price: 0,
  /**
   * 商品图片
   */
  img: '',
  /**
   * 最小售价限制
   */
  minLimit: '',
  /**
   * 最大售价限制
   */
  maxLimit: '',
  /**
   * 库存类型 0计算库存 1不计算库存
   * 对应
   */

  stockType: 0,
  /**
   * 库存数量 类型为计算库存是必填 默认0
   */
  stock: 0,
  /**
   * 是否需要填写身份证
   */
  idCard: true,
  /**
   * 通用库存,开启表示客户如果有通用库存数量，可以直接免费下单
   */
  generalStock: true,
  /**
   * 快递运费类型 0包邮 1固定运费 2运费模板
   * 对应
   */
  postType: 0,
  /**
   * 类型为 1固定运费时，存储运费
   */
  postFee: '',
  /**
   * 类型为 2运费模板时，存储运费模板ID
   */
  postTemplateId: '',
  /**
   * 地区设置JSON 存储地区code
   */
  areaCode: [],
  /**
   * 地区类型 0可发货  1不可发货
   * 对应
   */
  areaType: 0,
  /**
   * 商品状态
   */
  state: '',
  content: '',
})
const checked1 = ref(false)
const topList = ref([1, 2, 3, 4, 5, 6])
//新建商品弹窗
function addGoodFn() {
  router.push('/goods')
}
function openUpdateGood(val: any) {
  router.push({ path: '/goods', query: { goods: val.id } })
}
function copyGood(val: any) {
  get({
        url: '/app/mall/info',
        data: { id: val.id },
      }).then((res: any) => {
        Modal.warning({
    title: '操作确认',
    content: '确定要复制此商品吗？',
    cancelText: '取消',
    titleAlign: 'start',
    hideCancel: false,
    okText: '确认',
    onOk: () => {
      val.name = val.name + '(复制)'
      post({
        url: '/app/mall/insert',
        data: () => {
          return {
            ...res.data,
          }
        },
      })
        .then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            doRefresh()
          } else {
            Message.error(res.msg)
          }
        })
        .catch(console.log)
    },
  })
      })
  
}
function openProfitGood(val: any) {
  Modal.warning({
    title: '操作确认',
    content: '确定要重新分润此商品吗？',
    cancelText: '取消',
    titleAlign: 'start',
    hideCancel: false,
    okText: '确认',
    onOk: () => {
      get({
        url: '/app/mall/again/profit/sharing',
        data: () => {
          return {
            mallId: val.id,
          }
        },
      })
        .then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            doRefresh()
          } else {
            Message.error(res.msg)
          }
        })
        .catch(console.log)
    },
  })
}
function openDeleGood(val: any) {
  Modal.warning({
    title: '操作确认',
    content: '确定要删除此商品吗？',
    cancelText: '取消',
    titleAlign: 'start',
    hideCancel: false,
    okText: '删除',
    onOk: () => {
      get({
        url: '/app/mall/delete',
        data: () => {
          return {
            id: val.id,
          }
        },
      })
        .then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            doRefresh()
          } else {
            Message.error(res.msg)
          }
        })
        .catch(console.log)
    },
  })
}
function beforeCloseGood() {
  goodInfo.value.id = null
  goodRef.value?.resetFields()
  checked1.value = false
  goodInfo.value = {
    /**
     * 分类ID
     */
    classId: '',
    /**
     * 商品名称
     */
    name: '',
    /**
     * 成本
     */
    cost: 0,
    /**
     * 售价
     */
    price: 0,
    /**
     * 商品图片
     */
    img: '',
    /**
     * 最小售价限制
     */
    minLimit: '',
    /**
     * 最大售价限制
     */
    maxLimit: '',
    /**
     * 库存类型 0计算库存 1不计算库存
     * 对应
     */

    stockType: 0,
    /**
     * 库存数量 类型为计算库存是必填 默认0
     */
    stock: 0,
    /**
     * 是否需要填写身份证
     */
    idCard: true,
    /**
     * 通用库存,开启表示客户如果有通用库存数量，可以直接免费下单
     */
    generalStock: true,
    /**
     * 快递运费类型 0包邮 1固定运费 2运费模板
     * 对应
     */
    postType: 0,
    /**
     * 类型为 1固定运费时，存储运费
     */
    postFee: '',
    /**
     * 类型为 2运费模板时，存储运费模板ID
     */
    postTemplateId: '',
    /**
     * 地区设置JSON 存储地区code
     */
    areaCode: [],
    /**
     * 地区类型 0可发货  1不可发货
     * 对应
     */
    areaType: 0,
    /**
     * 商品状态
     */
    state: '',
    content: '',
  }
  if (checked1.value == true) {
  } else {
    goodVisible.value = false
  }
}
function handleSubmitGood() {
  goodRef.value?.validate().then((error: any) => {
    if (!error) {
      if (goodInfo.value.id) {
        post({
          url: '/app/mall/update',
          data: () => {
            return {
              ...goodInfo.value,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              beforeCloseGood()
              doRefresh()
            } else {
              Message.error(res.msg)
            }
          })
          .catch(console.log)
      } else {
        post({
          url: '/app/mall/insert',
          data: () => {
            return {
              ...goodInfo.value,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              beforeCloseGood()
              doRefresh()
            } else {
              Message.error(res.msg)
            }
          })
          .catch(console.log)
      }
    }
  })
}
//商品图片上传
const onSuccessBcg = (fileItem: any) => {
  goodInfo.value.img = fileItem.response.data.path
}
//商品设置上传客服图片
const onSuccessBcg1 = (fileItem: any) => {
  mallSysInfo.value.customerServiceImg = fileItem.response.data.path
}
//商品设置上传客服图片
const onSuccessBcg3 = (fileItem: any) => {
  mallSysInfo.value.logo = fileItem.response.data.path
}
//商品设置上传轮番图片
const onSuccessBcg2 = (fileItem: any) => {
  mallSysInfo.value.banner[imgIndex.value].img = fileItem.response.data.path
}
//设置可发货/禁区
const regionVisible = ref(false)
const loadingTree = ref(false)
const selectList: any = ref([])
const arr: any = ref([])
const cancelRegion = () => {
  arr.value = []
  selectList.value = []
  regionVisible.value = false
}
const handleBeforeOkRegion = () => {
  console.log(selectList.value)
  goodInfo.value.areaCode = selectList.value
  console.log(goodInfo.value.regionalRestrictions)
  regionVisible.value = false
}
const clickSet = () => {
  getDistrictsList(3)
  regionVisible.value = true
  selectList.value = goodInfo.value.areaCode
}
//获取地区列表
const getDistrictsList = (val: any) => {
  useCommon.getDistrictsList(val).then((res: any) => {
    regionList.value = res.data
  })
}
//列表操作
const pagination = usePagination(doRefresh)
const rowKey = useRowKey('id')
const tableColumns = reactive({
  list: [
    {
      title: '商品ID',
      key: 'id',
      dataIndex: 'id',
      checked: true,
      width: 93,
    },
    {
      title: '商品名称',
      key: 'name',
      dataIndex: 'name',
      checked: true,
      width: 289,
    },
    {
      title: '商品成本',
      key: 'cost',
      dataIndex: 'cost',
      checked: true,
      width: 143,
    },

    {
      title: '商品售价',
      key: 'price',
      dataIndex: 'price',
      checked: true,
      width: 143,
    },
    {
      title: '商品库存',
      key: 'stock',
      dataIndex: 'stock',
      checked: true,
      width: 143,
    },
    // {
    //   title: '商品销量',
    //   key: 'state',
    //   dataIndex: 'state',
    //   checked: true,
    //   width: 143,
    // },
    {
      title: '商品状态',
      key: 'state',
      dataIndex: 'state',
      checked: true,
      width: 143,
    },
    {
      title: '创建时间',
      key: 'addTime',
      dataIndex: 'addTime',
      checked: true,
      width: 245,
    },
    {
      title: '操作',
      key: 'actions',
      dataIndex: 'actions',
      checked: true,
      width: 245,
      fixed: 'right',
    },
  ],
})
//一行一个多ID搜索
const multipleVisible = ref(false)
const multipleText = ref('')
const open = () => {
  multipleVisible.value = true
}
const close = () => {
  multipleVisible.value = false
}
function multipleFn() {
  const arr = multipleText.value.split(/\n/g)
  form.id = arr.toString()
  multipleVisible.value = false
}
const typeText = ref('')
const type = ref('name')
const typeLists = ref([
  {
    name: '商品名称',
    value: 'name',
  },
  {
    name: '商品ID',
    value: 'id',
  },
  {
    name: '商品编码',
    value: 'coding',
  },
])
function typeFn() {
  for (var key in form) {
    if (key !== type.value) {
      form[key] = ''
    }
  }
}
//商品列表搜索项
const form = reactive({
  age: "",
  coding: "",
  id: "",//                        商品ID
  name: "",//                       商品名称
  type: "",//                        商品类型 0物联卡 1号卡
  operatorIds: [],//                 运营商 0中国移动 1中国联通 2中国电信  3中国广电
  classIds: [],//                    分类ID
  channelIds: [],//                   渠道ID
  mainPush: "",//                    是否主推
  belongingPlaces: [],//              归属地 0随机 1固定 2收货地
  selectNumberTypes: [],//            选号方式 0随机号码 1激活选号 2在线选号 3号池选号
  idCardImg: "",//                   是否上传证件照
  commissionRules: [],//              佣金规则 0秒反 1次月底反 2月月反
  settlementType: "",//              结算方式 0手动结算 1自动结算
  discountTimeType: "",//            优惠时长类型 0固定优惠 1到期可续
  stockType: "",//                   库存类型 0计算库存 1不计算库存
  state: "",//                       商品状态
  addTime: "",//                     开始创建时间
  endTime: "",//                     结束创建时间
  addPrice: "",//                    开始售价
  endPrice: "",//                    结束售价
  addCost: "",//                     开始成本
  endCost: "",//                     结束成本
  addSetMealPrice: "",//             开始套餐价格
  endSetMealPrice: "",//             结束套餐价格
  addSetMealGeneralFlow: "",//       开始套餐通用流量
  endSetMealGeneralFlow: "",//       结束套餐通用流量
  addSetMealDirectionalFlow: "",//   开始套餐定向流量
  endSetMealDirectionalFlow: "",//   结束套餐定向流量
  addCallMinutes: "",//              开始通话时间
  endCallMinutes: "",//              结束通话时间
  addFirstPayAmount: "",//           开始首充金额
  endFirstPayAmount: "",//           结束首充金额
  addStock: "",//                    开始库存数量
  endStock: "",//                   结束库存数量
  addCommission: "",//              开始佣金
  endCommission: "",//               结束佣金
  addDiscountTime: "",//             开始优惠时长
  endDiscountTime: "",//             结束优惠时长
  minAge: "",//                     开始年龄限制
  maxAge: "",//                     结束年龄限制
})
const seachForm = ref()
//重置商品搜索项
function resetFn() {
  seachForm.value?.resetFields()
  form.addPrice = ''
  form.addPrice = ''
  form.coding = ""
  form.id = ''
  form.name = ''
  form.addCost = ""//                     开始成本
  form.endCost = ""//                     结束成本
  form.addSetMealPrice = ""//             开始套餐价格
  form.endSetMealPrice = ""//             结束套餐价格
  form.addSetMealGeneralFlow = ""//       开始套餐通用流量
  form.endSetMealGeneralFlow = ""//       结束套餐通用流量
  form.addSetMealDirectionalFlow = ""//   开始套餐定向流量
  form.endSetMealDirectionalFlow = ""//   结束套餐定向流量
  form.addCallMinutes = ""//              开始通话时间
  form.endCallMinutes = ""//              结束通话时间
  form.addFirstPayAmount = ""//           开始首充金额
  form.endFirstPayAmount = ""//           结束首充金额
  form.addStock = ""//                    开始库存数量
  form.endStock = ""//                   结束库存数量
  form.addCommission = ""//              开始佣金
  form.endCommission = ""//               结束佣金
  form.addDiscountTime = ""//             开始优惠时长
  form.endDiscountTime = ""//             结束优惠时长
  form.minAge = ""//                     开始年龄限制
  form.maxAge = ""//                     结束年龄限制
  multipleText.value = ''
  typeText.value = ''
  doRefresh(1)
}
//获取商品列表内容
const table = useTable()
const goodList: any = ref([])
function doRefresh(value?: number) {
  tables.tableLoading = true
  loadingList.value = true
  if (value) {
    pagination.page = value
  }
  form[type.value] = typeText.value
  formpost({
    url: `/app/mall/list?page=${pagination.page}&size=${pagination.pageSize}`,
    data: () => {
      return {
        ...form,
        operatorIds: form.operatorIds.toString(),
        classIds: form.classIds.toString(),
        channelIds: form.channelIds.toString(),
        belongingPlaces: form.belongingPlaces.toString(),
        selectNumberTypes: form.selectNumberTypes.toString(),
        commissionRules: form.commissionRules.toString(),
      }
    },
  }).then((res: any) => {
    tables.tableLoading = false
    table.handleSuccess(res.data.list)
    loadingList.value = false
    pagination.setTotalSize((res.data as any).totalSize)
  })
}
const loading = ref(false)
//导出商品列表
const goodsExport = () => {
  loading.value = true
  form[type.value] = typeText.value
  useCommon
    .downLoadPosts('/app/mall/list/export', form, '商品列表')
    .then(() => {
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}

//列表样式操作
const tables = reactive({
  tableLoading: false,
  bordered: false,
  striped: false,
  expand: [1],
  isExpand: false,
})
const onUpdateBorder = (isBordered: boolean) => {
  tables.bordered = isBordered
}
function onUpdateStriped(isStriped: boolean) {
  tables.striped = isStriped
}
function rowClassNameFun(_record: any, index: number) {
  return index % 2 === 1 && table.striped.value ? 'table-striped' : null
}
//跟踪API开始时间限制结束时间
function changeTraceEnd(time: any) {
  return time.getTime() > new Date(form.endTime).getTime() //大于结束时间的不选
}
//跟踪API结束时间限制开始时间
function changeTraceStart(time: any) {
  return time.getTime() < new Date(form.addTime).getTime() //小于开始时间的不选
}
const seriesNo: any = ref([])
const seriesIds = () => {
  useCommon.seriess().then((res) => {
    seriesNo.value = res.data
  })
}
//获取渠道
const channelList: any = ref([])
function channelListFn() {
  get({
    url: '/app/mall/channel/name/list',
  }).then((res: any) => {
    channelList.value = res.data
  })
}
onMounted(() => {
  pagination.pageSize = 12
  classListFn()
  doRefresh()
  channelListFn()
})
</script>

<style lang="less" scoped>
.changeBox{
  display: flex;
  justify-content: space-between;
  max-height: 700px;
  overflow-y: scroll;
  .changeSpan{
    margin-top: 15px;
  }
  .changeName{
    font-size: 18px;
    font-weight: 700;
    color: red;
  }

  .changeName1{
    font-size: 18px;
    font-weight: 700;
    color: green;
  }

  .changeBeforeValue{
    color:red
  }

  .changeBeforeValue1{
    color:green
  }

  .changeTitle{
    font-size: 16px;
    font-weight: 700;
    margin-top: 15px;
  }

  .changeBefore{
    width: calc((100% - 20px) / 2);
    padding: 10px;
    border-radius: 10px;
  }

}
.zhuClass {
  border-radius: 2px;
  padding: 3px;
  padding-right: 1px;
  font-size: 12px;
  color: #ffffff;
  background: linear-gradient(to right, #ffca66, #ffa700);
  margin-right: 5px;
}

.imgBcg {
  position: absolute;
  right: 10px;
  top: 40px;
  display: block;
  opacity: 0.3;
  width: 125px;
  height: 125px;
  z-index: 1;
}

:deep(.bcg) {
  padding: 0px !important;
}

:deep(.bcgConfig) {
  display: none;
}

.goodsHead {
  width: 100%;
  padding: 20px;

  .topBox {
    width: 70%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    /* 示例代码 */

    .shareBtn {
      cursor: pointer;
      position: absolute;
      right: 10px;
      top: 10px;
    }

    .leftImage {
      border-radius: 10px;
      width: 150px;
      height: 150px;
      overflow: hidden;
    }

    .cardTags {
      flex-grow: 1;
      margin-left: 20px;

      .textItems {
        margin-top: 4px;
        font-size: 16px;
        color: var(--color-neutral-10);
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .tags {
        margin-top: 4px;
        display: flex;
        align-items: center;
      }
    }

    .jinfaBox {
      width: 100%;
      margin-top: 10px;
      border-radius: 2px;
      background-color: var(--color-neutral-2);
      color: #ff0000;
      font-size: 11px;
    }

    .jinfaBox1 {
      width: 100%;
      margin-top: 10px;
      border-radius: 2px;
      background-color: var(--color-neutral-2);
      color: rgb(var(--arcoblue-6));
      font-size: 11px;
    }
  }
}

:deep(.arco-form-item-label) {
  width: 100%;
  text-align: right;
}

.tabs-button {
  :deep(.arco-radio-button-content) {
    width: 100%;
    line-height: 35px;
    text-align: center;
    height: 35px;
  }

  :deep(.arco-radio-group-button) {
    background-color: transparent !important;
    border: 1px solid #e5e6eb;
    border-radius: 5px;
    padding: 0;
  }

  :deep(.arco-radio-button) {
    margin: 0;
  }

  :deep(.arco-radio-button.arco-radio-checked) {
    margin: 0;
    background-color: #e5e6eb;
    color: #000000;
  }

  :deep(.arco-radio-button:hover) {
    margin: 0;
    background-color: #e5e6eb;
    color: #000000;
  }

  :deep(.arco-radio-button:not(:first-of-type)::before) {
    height: 35px;
  }
}

.list-button {
  margin-right: 5px;
  padding: 0px;
}

.box {
  display: flex;
  align-items: center;
  height: 15px;

  .line {
    width: 5px;
    height: 15px;
    margin-right: 10px;
    background-color: #40a1ff;
  }
}

:deep(.arco-collapse-item-header-right) {
  padding-left: 20px;
}

:deep(.arco-collapse-item-header-right + .arco-collapse-item-content) {
  padding-left: 10px;
}

:deep(.arco-collapse-item-header) {
  border: none;
}

:deep(.arco-radio) {
  margin-right: 8px;
}

:deep(.arco-rate) {
  font-size: 12px;
  color: #dbdcde !important;
  min-height: 16px;
}

:deep(.arco-collapse-item) {
  border: none;
}

:deep(.arco-collapse-item-content) {
  background: none;
  padding-right: 10px;
}

:deep(.arco-input-append) {
  padding: 0 !important;
}
</style>
